CSS Text align when wrapping - css

Question

I'm having trouble aligning text when the window is resized, e.g. on mobile.
Here's the HTML:
.count-panel {
float: left;
width: 64px;
border: 1px #888 solid;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
clear: both;
margin-bottom: 16px;
}
<div class='table'>
<div class='row'>
<div class='count-panel'>
<span class='count'>1</span>
</div>
<div class='message'>This is line one</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>2</span>
</div>
<div class='message'>This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>3</span>
</div>
<div class='message'>This is line three</div>
</div>
At larger sizes: Larger
At smaller sizes: Smaller
I need the text in the second line to align with the others and not wrap hard left as in the image. Thanks.

Answer 1

That behaviour on mobile is due to the float applied to the .count-panel element. You could instead use flexbox and clean a bit the css code, like so:
Codepen demo
.count-panel {
border: 1px #888 solid;
flex: 0 0 64px;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
margin-bottom: 16px;
display: flex;
}

Answer 2

It's just your float: left that's taking the count-panel out of sync.
I have replaced your example with display: flex instead. I would suggest avoiding float when positioning your elements as it was never intended to be used for layout. Flex is a much cleaner solution and I think it gives you more flexibility of layout choices. :-)
I've also amended the HTML layout slightly to include the border on the number itself so that it doesn't stretch the full size of the text content on smaller devices.
.count {
font: 42px Roboto, sans-serif;
min-width: 64px;
border: 1px #888 solid;
text-align: center;
max-height: max-content;
}
.message {
font-size: 20px;
}
.row {
display: flex;
flex-direction: row;
margin: 0 10px 16px 0;
}
<div class='table'>
<div class="row">
<span class="count">1</span>
<div class="message">This is line one</div>
</div>
<div class="row">
<span class="count">2</span>
<div class="message">This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class="row">
<span class="count">3</span>
<div class="message">This is line three</div>
</div>
</div>