JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
  background-color:#d0e4fe;
}

div.container
{
  width: 600px;
  border: solid 1px black;
}

div.divLeft
{
  display:inline-block;
  border: solid 1px red;
  color: red;
}

div.divRight
{
  display:inline-block;
  border: solid 1px blue;
  color: blue;
}

</style>
</head>

<body>
  <div class="container">
    <div class="divLeft">
      <p>1 - Some short text</p>
    </div>
    <div class="divRight">
      <p>Some not too long text with the div besides the first one.</p>
    </div>
  </div>
  <div class="container">
    <div class="divLeft">
      <p>2 - Some short text</p>
    </div>
    <div class="divRight">
      <p>Some very long text that will eventually wrap because it is so long and when it wraps is when the trouble starts because the div moves down instead of staying besides the first one.</p>
    </div>
  </div>
</body>
</html>

CSS

.divLeft { width: 150px; vertical-align: top; }
.divRight { width: 400px; vertical-align: top; }