JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
    <span class="cut60">
        A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. Nem csak 5 évszázadot élt túl, de az elektronikus betûkészleteknél is változatlanul megmaradt. Az 1960-as években népszerûsítették a Lorem Ipsum részleteket magukbafoglaló Letraset lapokkal, és legutóbb softwarekkel mint például az Aldus Pagemaker.
    </span>
    <span class="cut40">
        A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. Nem csak 5 évszázadot élt túl, de az elektronikus betûkészleteknél is változatlanul megmaradt. Az 1960-as években népszerûsítették a Lorem Ipsum részleteket magukbafoglaló Letraset lapokkal, és legutóbb softwarekkel mint például az Aldus Pagemaker.
    </span>
    <div style="clear: both;"></div>
    <hr />
    
    <span class="cut60">
        szoveg
    </span>
    <span class="cut40">
        A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. Nem csak 5 évszázadot élt túl, de az elektronikus betûkészleteknél is változatlanul megmaradt. Az 1960-as években népszerûsítették a Lorem Ipsum részleteket magukbafoglaló Letraset lapokkal, és legutóbb softwarekkel mint például az Aldus Pagemaker.
    </span>
    <div style="clear: both;"></div>
        <hr />
    
    <span class="cut60">
       ...

CSS

.cut60{
  display: inline-block;
  max-width: 60%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  background: rgba(0, 255, 0, 0.5);
}

.cut40 {
  display: inline-block;
  max-width: 38%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  float: left;
  margin-left: 5px;
  background: rgba(0, 0, 255, 0.3);
}

JavaScript

$(document).ready(function(){    
    var cont = $('.cont');
    var contw = cont.width();
    
    $('.cont span').each(function(){
        if ($(this).hasClass('cut60')) {
            var cut60w = $(this).width();
            var cut60p = cut60w/contw*100;
            if (cut60p < 60) {
                var new60p = 100-cut60p-2 + '%';
                $(this).next().css('max-width', new60p);
            }
        }
    });
});