JSFiddle - React, Tailwind, and code Playground

HTML

<h2>1. должно быть</h2>
<p>красный блок на одной строке с зеленым и прижат к нему</p>

<div class="wrap">
  <div class="first">
    Произвольное количество текста.
  </div>
  <div class="second">
    sec
  </div>
  <div class="third">
    third
  </div>
</div>

<h2>2. а тут ломается</h2>
<p>красный блок уехал на новую строку</p>

<div class="wrap">
  <div class="first">
    Произвольное количество текста. Может быть много, а может совсем чуть чуть. Следующий за этим блок .second должен быть всегда справа от этого блока.
  </div>
  <div class="second">
    sec
  </div>
  <div class="third">
    third
  </div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 30px;
}

.wrap {
  margin-bottom: 30px;

  display: flex;
  flex-wrap:wrap;
}

.first {
  flex: 0 1 auto;
  background: green;
}

.second {
  flex: 0 1 auto;
  background: red;
}

.third {
  flex: 0 1 100%;
  background: orange;
}