I am in the process of designing a layout with 3 columns aligned in the same row:
- The first column should adjust to its content, such as a picture or avatar
- The third column should also adjust to its content, like a date or time. Meanwhile, the second column should contain a sentence and occupy all remaining space. If the text is too long, it should be broken so that the second column does not expand indefinitely and create a new row.
I attempted the following:
You can view my attempt at this design by visiting this link.
<div class="row" style="width: 24rem; border: 1px solid gray">
<div class="col"><img src="https://i1.wp.com/thecatalystnews.com/wp-content/uploads/2021/02/OPINION_avatar_XixiQin.png?resize=48%2C50&ssl=1"/></div>
<div class="col-auto">Mister Green</div>
<div class="col">13.06.2021</div>
</div>
Unfortunately, I have been unable to achieve the desired result. When the text is too lengthy, the column keeps expanding until it occupies 100% of its parent element and spills onto a new row.
Does anyone have any suggestions on how to fix this issue?
Thank you in advance!