JSFiddle - React, Tailwind, and code Playground

by Rajan Paneru

HTML

<div class='row'>
  <div class='c1'>hello</div>
  <div class='c2'>bob</div>
</div>

<div class='row'>
  <div class='c1'>this is a very long test test bc a</div>
  <div class='c2'>bob</div>
</div>
<div class='row'>
  <div class='c1'>this is a very</div>
  <div class='c2'>bob merry</div>
</div>

<div class='row'>
  <div class='c1'>this is a very long test test bc a</div>
  <div class='c2'>bob</div>
</div>


<div class='row'>
  <div class='c1'>this is a very</div>
  <div class='c2'>bob merry</div>
</div>

CSS

.row .c1 {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  z-index: 1;
  background-color: red;
}

.row .c2 {
  float: right;
  background-color: green;
}

.row {
  width: 200px;
  position: relative;
     
}

.row:after {
  clear: both;
  content: "";
  display: table;
}

JavaScript

$(document).ready(function(){
  $('.row').each(function(){
    if($(this).find('.c1').width()+$(this).find('.c2').width()>$(this).width())
    {
        $(this).find('.c2').css({display:'none'});
        $(this).find('.c1').css({position:'relative'});
    }
  });  
});