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">
    Произвольное количество текста. М о ж е т б ы т ь м н о г о , а м о ж е т с о в с е м чуть чуть. С л е д у ю щ и й  з а э т и м б л о к .s e c o n d д о л ж е н б ы т ь в с е г д а с п р а в а  о т э т о г о   б л о к а.
  </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;
  max-width: calc(100% - 20px);
}

.second {
  flex: 0 1 auto;
  background: red;
  width: 20px;
  height: 20px;
  align-self: flex-start;
}

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