JSFiddle - React, Tailwind, and code Playground

by Dwarakesh pallagolla

HTML

<div id='parent1' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div id='parent2' class="parent">
  <div class="left">Left long long long long long long long long long long long long long long long long</div>
  <div class="right">Right</div>
</div>
<div id='parent3' class="parent">
  <div class="left">Left</div>
  <div class="right">Right long long long long long long long long long long long long long long long long</div>
</div>
<div id='parent4' class="parent">
  <div class="left">Left long long long long long long long long long long long long long long long long</div>
  <div class="right">Right long long long long long long long long long long long long long long long long</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

SCSS

.left {
  padding: 1em;
  background-color: #337ab7;
  text-align: left;
}
.right {
  padding: 1em;
  background-color: #5cb85c;
  text-align: right;
}
.parent {
  display: flex;
  overflow: hidden;
  margin: 1em 0;
  color: #fff;
  border: 1px solid #333;
  align-items: center;
}
.parent div {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}