How to add two layout inside a sideBySideItem

You can't. You will have to switch to columnsLayout() 

And if your rich image is just a small square-shaped image you want to display, then you can add it in the same richTextDisplayField using a!richTextImage and a!richTextItem. Use char(10) between them to add a new line. 

Can you please guide me with the layout so that I can align one of the Item on the right and the other two(Img & text) being on top of each other. while keeping these two on the left.  If I use the columnsLayout I would be keeping the Image on top of the two items(rich Text component & sideBySideItem).

while the sideBySideItem on the 'right' has a lot of details which should be highlighted.

Also, this image pretty decent size, I had tried with richTextItem but it becomes too small to be visible.

Can you please guide me with the layout so that I can align one of the Item on the right and the other two(Img & text) being on top of each other. while keeping these two on the left.  If I use the columnsLayout I would be keeping the Image on top of the two items(rich Text component & sideBySideItem).

while the sideBySideItem on the 'right' has a lot of details which should be highlighted.

Also, this image pretty decent size, I had tried with richTextItem but it becomes too small to be visible.

{
  a!columnsLayout(
    columns: {
      a!columnLayout(
        contents: {
          a!imageField(
            label: "Image",
            labelPosition: "COLLAPSED",
            images: {
              a!documentImage(document: a!EXAMPLE_DOCUMENT_IMAGE())
            },
            size: "MEDIUM",
            isThumbnail: false,
            style: "STANDARD"
          ),
          a!richTextDisplayField(
            align: "CENTER",
            labelPosition: "COLLAPSED",
            value: { a!richTextItem(text: { "Styled Text" }) }
          )
        },
        width: "NARROW_PLUS"
      ),
      a!columnLayout(
        contents: {
          a!paragraphField(
            label: "Paragraph",
            labelPosition: "ABOVE",
            saveInto: {},
            refreshAfter: "UNFOCUS",
            height: "MEDIUM",
            validations: {}
          )
        }
      )
    }
  )
}