JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div class="flex">
  <div class="flex-child">
    I
  </div>
  <div class="flex-child break">
     <div class="column">
       <h4 class="break">
        Can't believe it Can't believe it Can't Can't believe it Can't believe it Can't 
     </h4>
     <h3 class="break">
        Can't believe it Can't believe it Can't beeve itCan't believe it Can't believe itCan't believe it Can't believe it
     </h3>
     </div>
  </div>
  <div class="flex-child">
    >>
  </div>
</div>

CSS

.flex {
    display: flex;
    border: 1px solid green;
}

.flex > div.flex-child {
    padding: 8px;
    background: lightgreen;
    border: 2px dashed goldenrod;
}

.break {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.column {
    display: flex;
    flex-direction: column;
}

h4 {
    color: blue;
}

h3 {
    color: red;
}