Vertically center having a floating sibling element

Question

I need to vertically center a div, adjacent to a floating div.

 .pic {float: left; width: 50%; border: 1px solid red;} .description {border: 1px dotted green;}

 <div class="container"> <figure> <div class="pic">pic1<br>this is a big pic</div> <div class="description">one</div> </figure> <figure> <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div> <div class="description">this is a multiline text example, yes, multiline one</div> </figure> <figure> etc... </figure> </div>

Is there a way to center the description without modifying (the CSS or HTML of) the:

a) the floatting .pic
b) the .description parent elements?

I need only the text to be
- centered
- to the right of the ".pic"

the green border behavior I don't care about...

Also, to be compatible with IE11

Answer 1

You could use flexbox .

 figure { display: flex; flex-flow: row wrap; align-items: center; } .pic {float: left; width: 50%; border: 1px solid red;} .description {border: 1px dotted green;}

 <div class="container"> <figure> <div class="pic">pic1<br>this is a big pic</div> <div class="description">one</div> </figure> <figure> <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div> <div class="description">two</div> </figure> <figure> etc... </figure> </div>

Answer 2

finally, testing with multiline texts, I could adapt the James answer to my needs. this is something like this

 figure { display: flex; flex-flow: row wrap; align-items: center; } .pic { float: left; width: 50%; border: 1px solid red; box-sizing: border-box; } .description { border: 1px dotted green; max-width: 50%; box-sizing: border-box; }

 <div class="container"> <figure> <div class="pic">pic1<br>this is a big pic</div> <div class="description">one</div> </figure> <figure> <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div> <div class="description">two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two</div> </figure> <figure> etc.. </figure> </div>