I am facing an issue where the icon and title are not aligning properly. When the title exceeds a certain length, it wraps under the icon instead of staying next to it. I need assistance in ensuring that the title always starts on a new line below the first letter, not the icon.
https://i.sstatic.net/I4Hqq.png
<div className="notAcceptingPatients col-med-6"\>
<h6 className="font-weight-bold text-dark "\>
<i
style={{
color: '#D14444',
fontSize: 23,
marginRight: 6,
}}
class="fa fa-info-circle"\>\</i\>
This Dental Clinic is currently not accepting new patients \</h6\>
<p className="notAcceptingPatients ml-2"\>
<p\>
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\</p\>
</p\>
</div\>
CSS
.notAcceptingPatients {
padding: 11px ;
background: rgba(219, 88, 88, 0.1);
border-radius: 8px;
p {
margin: 2px;
font-size: 15px;
color: $black;
background: none;
line-height: 19px;
font-weight: 400;
padding: 1px 0px;
}
}