JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <h2>с мягким переносом</h2>
  <p class="a soft">Как отловить этот код синтетичес­кие, найти и заменить его я не синтетичес­кие представляю. Если синтетичес­кие скачать страницу и попытаться найти HTML  синтетичес­кие сущность</p>

  <p class="b soft">Как отловить этот код синтетичес­кие, найти и заменить его я не синтетичес­кие представляю. Если синтетичес­кие скачать страницу и попытаться найти HTML  синтетичес­кие сущность</p>

  <p class="c soft">Как отловить этот код синтетичес­кие, найти и заменить его я не синтетичес­кие представляю. Если скачать страницу и попытаться найти HTML  синтетичес­кие сущность</p>
</section>
<section>
  <h2>без мягкого переноса</h2>

  <p class="a">Как отловить этот код синтетические, найти и заменить его я не синтетические представляю. Если синтетические скачать страницу и попытаться найти HTML  синтетические сущность</p>

  <p class="b">Как отловить этот код синтетические, найти и заменить его я не синтетические представляю. Если синтетические скачать страницу и попытаться найти HTML  синтетические сущность</p>

  <p class="c">Как отловить этот код синтетические, найти и заменить его я не синтетические представляю. Если синтетические скачать страницу и попытаться найти HTML  синтетические сущность</p>
</section>

CSS

p {
  outline: dashed 1px gray;
}
.a {
  width: 250px;
}
.b {
  width: 380px;
}
.c {
  width: 530px;
}

section {
  width: 550px;
  float: left;
}