Вертикально центр с плавающим элементом родного брата

Question

Мне нужно расположить центр по вертикали рядом с плавающим элементом.

.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>

Есть ли способ центрировать description без изменения (CSS или HTML):

а) плавающий .pic
б) родительские элементы .description?

Мне нужно только текст , чтобы быть
- по центру
- справа от ".pic"

поведение зеленой границы меня не волнует ...

Также для совместимости с IE11

Answer 1

наконец, тестируя многострочные тексты, я мог адаптировать ответ Джеймса к моим потребностям. это что-то вроде этого

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>

Answer 2

Вы можете использовать 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>