JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="flex-grid no-wider-than-viewport">

  <div class="flex-col ellipsis-wrapper">
    <div class="flex-grid no-wider-than-viewport">
          <div class="flex-col ellipsis-wrapper">
            <div class="ellipsis">THe first things are the most importantdsg dsfg sfd gdsfg dfsg sdf g</div>
          </div>
          <div class="flex-col">
            <span class="nowrap">SOMOSLÆSJA JLAD</span> 
          </div>
          
    </div>
    <div class="ellipsis">This is a long string that is OK to truncate please and thank you asdf asdf asdf sadf sadf sadf e wyt et erwgesafasf sadfeargtsehgsd gsdg sdg</div>
  </div>
  <div class="flex-col flex-1"><!-- Deliberately empty, taking up remaining space --></div>
  <div class="flex-col">
    Something<br>
    <span class="nowrap">Another thing</span>
  </div>
  
</div>

CSS

.flex-grid {
  display: flex;
}

.no-wider-than-viewport {
  max-width: 100vw;
}

.flex-col {
  /* TEMPORARY style below */
  outline: 1px solid dodgerblue;
}

.flex-1 {
  flex: 1;
}

.ellipsis-wrapper {
  flex: auto 1 auto;
  min-width: 0;
}

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

.nowrap {
  white-space: nowrap;
}