How to vertically display two divs in a row in a 'display: table' container?

Question

There is a 'display: table' container that has a text div on the left side and an image div on the right side as below. To make the image height responsive to the height of the text div, the image div has 'position: absolute'. This side by side design looks good on computer screens, but doesn’t on smart phone screens since they are narrow.

To make them look good even on the smart phone screens, I would like to move the text div on top and the image div underneath it via only CSS.

Does anyone know how to resolve this?

Any ideas would be appreciated. Thank you!

CSS

.container-article {display: table; width: 100%; position: relative;}
.left {width: 50%;}
.right {position: absolute; top: 0px; left: 50%; width: 50%; height: 100%; overflow-y: auto;}

HTML

<div class="container-article">
    <div class="left">
        <div>
            <p>Article Title</p>
        </div>
        <div>
            <p>Article Content Here.</p>
        </div>
    </div>
    <div class="right">
        <img src="example.jpg">
    </div>
</div>

Answer 1

You can update your CSS with the media tag like so:

.container-article {
  display: table;
  width: 100%;
  position: relative;
}

.left {
  width: 50%;
}

.right {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow-y: auto;
}


/* Responsive adjustments for screens narrower than 768px */
@media (max-width: 768px) {
    .container-article {
        display: block;
    }
    .left, .right {
        display: block;
        width: 100%;
        position: relative; 
        left: auto;
        height: auto;
    }
}

Please see the documentation