Two divs next to each other, the left one containing text, the right one an image

I try to set up a website with an image of a letter and a transcription. So basically:

<div id="wrapper" style="background-color:red">
  <div id="left-side" style="background-color:blue">
    Text
  </div>
  <div id="right-side" style="background-color:blue; min-width=50%; overflow: auto;">
    Image
  </div>
</div>

The image can either take up 50% of the width if the two divs are next to each other in the same line and 100% if the screen is too small so that the 2nd div is in the next line.

The text should not exceed a max-width of 750px and align to the right of the center page. If the divs are in two rows the text-div should be in the center.

This is what I have so far:

<div id="wrapper" style="background-color:red">
  <div id="left-side" style="background-color:blue">
    <div id="text" style="max-width:750px; min-width: 250px; background-color:orange; float:right; overflow-wrap: break-word;">
      This text should not be longer than 750px
    </div>
  </div>
  <div id="right-side" style="background-color:blue; max-width=50%;overflow: auto;">
    Image
  </div>
</div>

The problem is: Dealing with the two variants:

1. text and image next to each other, each 50% of the width
2. text above and image below, both divs in the center and width=100%

Probably what you want to use a @media rule based on the screen width. Here is an example that would limit the image to 49% and show beside the text if the screen where 1500 px or wider. (Eliminate the inline styling.)

#wrapper {
    background-color: red;
}

#left-side {
    background-color: yellow;
    text-align: right;
    width: 49%;
}

#right-side {
    background-color: green;
}

#text {
    display: inline-block;
    max-width: 750px;
    text-align: right;
    background-color: orange;
}

@media (min-width: 1500px) {
    #left-side {
        display: inline-block;
    }

    #right-side {
        display: inline-block;
        width: 49%;
    }
}