Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on content length within 400px space occupied by the images. Although it displayed correctly in mobile view, desktop view was posing challenges. In the illustration below, consider div 2 and 4 as paragraphs and div 1 and 3 as images.
https://i.sstatic.net/b2xYY.png
The desired outcome is depicted here:
https://i.sstatic.net/S7tLN.png
The objective is for the paragraph to expand to fill 100% of available space if lengthy, along with divs 3 and 4. My current code snippet appears as follows:
<div class="col-11">
<div style="margin-left:10px;margin-right:10px;">
{% for news in news %}
<h1 class="text-center" style="color: black; margin-top:20px; font-size:50px;">{{news.title}}</h1>
<div class="row g-2">
<div class="col-12 col-md-6 order-2 order-md-1" style="color: #025; margin-top:20px; font-size:20px;">
{% if news.para_one %}
<p>{{news.para_one|safe}}</p>
{% endif %}
</div>
<div class="col-12 col-md-6 order-1 order-md-2">
{% if news.image %}
<img src="{{news.image.url}}" alt="" class="img" style="height: 400px; width:650px;">
{% endif %}
</div>
</div>
<div class="detail" style="color: #025; margin-top:20px; font-size:20px;">
{% if news.para_two %}
<p >{{news.para_two|safe}}</p>
{% endif %}
</div>
...
CSS:
.col-11{
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
}
.row > .col-md-6:last-child:nth-child(odd) {
width: 100%;
}
@media screen and (max-width: 600px) {
.img{
height: 200px !important;
width: 100% !important;
}
}
I have explored a potential solution at , but it doesn't quite meet my requirements. Your assistance in resolving this issue would be greatly appreciated!