how to set image and info side by side in css - html

Question

I am stuck in a problem when am trying to set image and text side by side then its not shown perfect , checkout below I shared my code.
This is my image
https://ibb.co/SKS3bJM
i want like this
https://ibb.co/RhFkbkX
index.html
<div class="container">
<div class="row">
<div class="col-md-4 mt-2">
<img src="Images/twitter.jpg" style="width: 200px;">
<div style="margin-top: 10px;">
<h4>Should Twitter Get Rid of Follower Counts?</h4>
<p>The possibility feels closer than ever</p>
<p>Cool Neha in All Things Creative</p>
<p><b>JAN 9. 5 min read</b></p>
</div>
</div>
<div class="col-sm-4">
<div class="row" style="display: flex; flex-direction: column;" style="height: 50px;">
<div class="col-sm-4" style="display: flex; ">
<img src="Images/html.jpg" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="col-sm-4" style="display: flex;">
<img src="Images/cs.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="col-sm-4" style="display: flex;">
<img src="Images/js.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
</div>
</div>
<div class="col-sm-4 mt-2">
<img src="Images/cofee.png" style="width: 350px;">
<div style="margin-top: 10px;">
<h4>No,That's Not How You Say It.</h4>
<p>A short Personal history of my favourite fast Food.</p>
<p>VIP Singh</p>
<p><b>JAN 29. 8 min read</b></p>
</div>
</div>
</div>
</div>

Answer 1

It looks like the center column is being squished too much. This is because each image-text pair was inside a div with class="col-sm-4". This was making the div too narrow. If you remove the class, the problem will disappear.
This is the resulting code:
<div class="container">
<div class="row">
<div class="col-md-4 mt-2">
<img src="Images/twitter.jpg" style="width: 200px;">
<div style="margin-top: 10px;">
<h4>Should Twitter Get Rid of Follower Counts?</h4>
<p>The possibility feels closer than ever</p>
<p>Cool Neha in All Things Creative</p>
<p><b>JAN 9. 5 min read</b></p>
</div>
</div>
<div class="col-md-4">
<div class="row" style="display: flex; flex-direction: column;" style="height: 50px;">
<div class="" style="display: flex; ">
<img src="Images/html.jpg" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="" style="display: flex;">
<img src="Images/cs.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="" style="display: flex;">
<img src="Images/js.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
</div>
</div>
<div class="col-sm-4 mt-2">
<img src="Images/cofee.png" style="width: 350px;">
<div style="margin-top: 10px;">
<h4>No,That's Not How You Say It.</h4>
<p>A short Personal history of my favourite fast Food.</p>
<p>VIP Singh</p>
<p><b>JAN 29. 8 min read</b></p>
</div>
</div>
</div>
</div>