JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  One or two lines of text should be centered vertically:
</p>

<div class="wrapper" style="height: 50px">
  <img src="http://placekitten.com/50/50" class="image">
  <p class="text" style="line-height:50px; vertical-align: middle">
    A little bit of text!
  </p>
</div>

<p>
  Lots of text should wrap around the image, going underneath it:
</p>

<div class="wrapper">
  <img src="http://placekitten.com/50/50" class="image">
  <p class="text">
    A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
  </p>
</div>

<p>
  But any single solution ends up looking like this:
</p>

<div class="table-outer">
  <img src="http://placekitten.com/50/50" class="image">
  <p class="text">
    A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing...

CSS

.wrapper {
  border: 1px solid black;
  padding: 0;
  overflow: auto;
}

.image {
  float: left;
}

.text {
  margin: 0;
}

.table-outer {
  border: 1px solid black;
  display: table;
}

.table-outer .text {
  display: table-cell;
  vertical-align: middle;
}