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;
}