Vertically aligning divs around a floated left div

Question

Is there a way in css to align 3 divs (as shown), where the first is floated left and the container height = that div height (+ padding), and the second and third combined are vertically aligned in the container?

I tried this but couldn't quite get there.

 .x { width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; }.x>:nth-child(1) { display: block; float: left; width: 48px; height: 48px; border-radius: 50%; border: solid 1px #333333; margin: 4px 16px 4px 4px; }.x>:nth-child(2) { font-size: 12pt; }.x::after { content: ''; width: 100%; }.x>:nth-child(3) { font-size: 10pt; font-weight: 600; order: 1; }

 <div class="x"> <div></div> <div>Line 1</div> <div>Line 2</div> </div>

I'd prefer to drop the sizing from the first div and allow that to happen automatically if possible

Answer 1

You just needed to wrap your last two divs in a container.

Here is the working solution. https://jsfiddle.net/manoj1234/aqLy97wb/

 .x { width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; }.x>:nth-child(1) { display: block; float: left; width: 48px; height: 48px; border-radius: 50%; border: solid 1px #333333; margin: 4px 16px 4px 4px; }.x>:nth-child(2) { font-size: 12pt; }.x::after { content: ''; width: 100%; }.x>:nth-child(3) { font-size: 10pt; font-weight: 600; order: 1; }

 <div class="x"> <div></div> <div id="col-2-container"> <div>Line 1</div> <div>Line 2</div> </div> </div>

Answer 2

Just wrap the last two divs in another div

 .x { width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; }.x>:nth-child(1) { display: block; float: left; width: 48px; height: 48px; border-radius: 50%; border: solid 1px #333333; margin: 4px 16px 4px 4px; }.x>:nth-child(2) { font-size: 12pt; }.x::after { content: ''; width: 100%; }.x>:nth-child(3) { font-size: 10pt; font-weight: 600; order: 1; }

 <div class="x"> <div></div> <div> <div>Line 1</div> <div>Line 2</div> </div> </div>