Cannot align text and image side by side? [duplicate] - html

Question

This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 4 years ago.
I have added an image and text. Text has 1 <h6> and 2 <p> tags. I tried using float:left but it does not get displayed side by side.
content.js:
<div className="col l4">
<div className="card1">
<img className="javacardimg" src={java} alt="Java" height="65" width="65"></img>
<h6 className="cardtitle1">New Launch</h6>
<p className="cardcontent1">JAVA</p><p></p>
<p className="cardcontent1">Foundations</p>
</div>
</div>
<div className="col l4">
<div className="card2">
<img className="neuralcard" src={neural} alt="Neural Network" height="65" width="65"></img>
<h6 className="cardtitle2">Enroll Now</h6>
<p className="cardcontent2">Neural Newtwork</p><p></p>
<p className="cardcontent2">Foundations</p>
</div>
</div>
css:
.cardcontent{
float: left;
}
.card1 {
width: 100%;
}
.card1 > h6 {
margin: 0px;
}
I want to display New Launch JAVA Foundations on right of image similarly for card2 but current css does not work I tried few css styling but does not work.
Screenshot:

Answer 1

Try to use Flexbox here...and also wrap your right side content into a div for better practice and readability
.card1 {
display: flex;
align-items: flex-start;
}
h6 {
margin-top: 0;
}
.item {
padding-left: 10px;
}
<div class="card1">
<img className="javacardimg" src="http://via.placeholder.com/100x100?text=JAVA" alt="Java">
<div class="item">
<h6 className="cardtitle1">New Launch</h6>
<p className="cardcontent1">JAVA Foundations</p>
</div>
</div>