Prevent floated div from going to next line given text content length - html

Question

I've run into some CSS positioning issues. After reading some other questions, I have been unable to find my exact issue or anything that I can identify that would indicate how I could resolve my issue.
I have an undefined number of rows of data that need to follow the same structure. The structure is as follows:
A colored icon on the left
Undefined length of text on the right
So far I have the following result which I am happy with in regards to single line text:
When I have the text extend beyond a single line however, I end up with the following result:
I need to make it so that my text is always aligned vertically with my icon, so that the middle of the text lines up with the middle of the icon. The only fixed values I have are for the widths of my icons. I unfortunately can't fix the width of the text div as it needs to expand as the window expands.
I have got the following structure to create the images presented:
<div class="row">
<div class="iconDiv">
<div class="circle"></div>
</div>
<div class="informationDiv">
<span class="information"></span>
</div>
</div>
.row {
clear: left;
}
.iconDiv {
float: left;
margin-left: 10px;
}
.informationDiv {
display: inline-block;
float: left;
padding-top: 3px; /*How I am currently aligning my text vertically to center of icon*/
}
I have tried using box-sizing just incase this was pushing the div to the next line but it didn't seem to help. I've also tried setting the height of the div but again no luck. The truth is that CSS is not my strong point and that I can miss what the real reason behind a problem is. If there are any resources anyone would recommend in particular to assist with this side of positioning, that would be fantastic. Additionally if the way that I am containerising (surely that is a word) things is not recommended, I am more than open to changing that.
If this is too difficult without using fixed values, then I could alternatively make it so that the icon remains towards the top of the row, and the text continues to descend as it grows, with the top of the text being aligned close ot the top of the icon. This is definitely not the preference however.
Thanks you all in advance!

Answer 1

You can simplify this down to one flex parent and two children. Vertical alignment with flexbox is hassle-free.
Demo
.row {
display: flex;
align-items: center;
}
.row {
margin-bottom: 1.2em;
}
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 15px;
flex-shrink: 0;
}
.circle.high-pri {
background-color: #ea9999;
}
.circle.medium-pri {
background-color: #f9cb9c;
}
.circle.low-pri {
background-color: #b6dca8;
}
<div class="row">
<div class="circle high-pri"></div>
<span class="information">High priority - No issues here</span>
</div>
<div class="row">
<div class="circle medium-pri"></div>
<span class="information">High priority - No issues here but slightly longer text</span>
</div>
<div class="row">
<div class="circle low-pri"></div>
<span class="information">High priority - No issues but much longer text than first expected, which is definitely okay, see?</span>
</div>

Answer 2

I am not quite sure how you are generating the circle, Is it an icon or an image? When you are using an icon. You can symply create something like this:
<p><img class="circle">Undefined text</p>
I think this won't break the line. And always keep it in front.
Also. You should probably not use padding-top on the text for aligning it in the middle of the circle. Use line-height.
For example:
When your circle is 30 px high. Use line-height: 30px; This will always keep it centered next to the circle and works better than padding regarding to responsiveness.

Answer 3

You're not far off.
Given your current CSS, the best way to achieve this is to not float .informationDiv. Set it to display: block and then give it a margin-left. The floated element will then sit inside the margin.
Like this...
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.row {
clear: left;
}
.iconDiv {
float: left;
margin-left: 10px;
}
.informationDiv {
display: block;
margin-left: 40px;
}
<div class="row">
<div class="iconDiv">
<div class="circle"></div>
</div>
<div class="informationDiv">
<span class="information">A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. </span>
</div>
</div>

Answer 4

I have come up with a solution for your issue by using css flexbox.
Working demo : https://codepen.io/shubhamYerawar/pen/xBZWLX.
.container {
display: flex;
flex-direction: column;
}
.container__row {
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 10px;
}
.red {
background: red
}
.green {
background: green;
}
<div class="container">
<div class="container__row">
<div class="icon red">
<!-- here your icon or image will go -->
</div>
<div class="text">Text</div>
</div>
<div class="container__row">
<div class="icon_container">
<div class="icon green">
<!-- here your icon or image will go -->
</div>
</div>
<div class="text">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
</div>
</div>
<div class="container__row">
<div class="icon red">
<!-- here your icon or image will go -->
</div>
<div class="text">Text</div>
</div>
</div>
Hope this helps you.