I have inserted an image and some text. The text consists of 1 <h6> tag and 2 <p> tags. I attempted to use the float:left property, but the content did not display side by side as intended.
Here is the code from 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>
This is the relevant CSS:
.cardcontent{
float: left;
}
.card1 {
width: 100%;
}
.card1 > h6 {
margin: 0px;
}
I am trying to align the content New Launch, JAVA, and Foundations to the right of the image for both card1 and card2. However, the current CSS styling is not achieving the desired layout. I have experimented with various CSS rules, but none seem to work.
Here is a screenshot of the issue:
https://i.sstatic.net/vwMIF.png