JSFiddle - React, Tailwind, and code Playground

HTML

<div class="incidentRow">
                    <div class="incidentCellLeft">
                        <div class="incidentCellTopLeft incidentId"><span class="incidentId">206 805</span></div>
                        <div class="incidentCellBottomLeft"><span class="incidentReferences">15</span></div>
                    </div>
                    <div class="incidentCellRight">
                        <div class="incidentCellTopRight"><span class="incidentSubject">Anders Buch Lassen</span></div>
                        <div class="incidentCellBottomRight"><p class="multilineEllipseText incidentDescription">Knokler, knokler, knokler! Burde gå i seng.
                        Knokler, knokler, knokler! Burde gå i seng. Knokler, knokler, knokler! Burde gå i seng.Knokler, knokler, knokler! Burde i seng.
                        Knokler, knokler, knokler! Burde i seng.Knokler, knokler, knokler! Burde i seng.Knokler, knokler, knokler! Burde i seng.
                        Knokler, knokler, knokler! Burde i seng.Knokler, knokler, knokler! Burde i seng.Knokler, knokler, knokler! Burde i seng.
                        </p></div>
                    </div>
                </div>

                <div class="incidentRow">
                    <div class="incidentCellLeft">
                        <div class="incidentCellTopLeft incidentId"><span class="incidentId">206 805</span></div>
                        <div class="incidentCellBottomLeft"><span class="incidentReferences">15</span></div>
                    </div>
                    <div class="incidentCellRight">
                        <div class="incidentCellTopRight"><span class="incidentSubject">Anders Buch Lassen</span></div>
                        <div class="incidentCellBottomRight"><p class="multilineEllipseText incidentDescription">Knokler, knokler, knokler! Burde gå i seng.
                        </p></div>
                    </div>
                </div>

CSS

.incidentRow
{
    max-height:200px;
    width: 580px;
    position: relative;
    display: block;
    float: left;
    background-color: white;
    border-bottom: 15px solid #5091CD;
}

.incidentCellLeft
{
    max-height:200px;
    height: 100%;
    width: 50px;
    display: block;
    float:left;
    text-align: center;    
    position: absolute;
    vertical-align: bottom;
    background-color: #E6E6E6;
    
}

.incidentCellRight
{
    background: green;
    max-height:200px;
    width: 50px;
    display: block;
    float: right;
    height: 100%;
}

p
{
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.incidentCellTopLeft
{
    max-height: 100px;
    width: 50px;    
    display: block;
    border-bottom: 1px solid #E6E6E6;    
    background-color: #E6E6E6;
    margin-top: 5px;
}

.incidentCellBottomLeft
{
    max-height:100px;
    width: 50px;    
    display: block;
    background-color: #E6E6E6;
}

.incidentCellTopRight
{    
    min-height: 35px;
    width: 520px;
    padding-left: 10px;
    padding-top: 10px;
    display: block;
    float:right;
    border-bottom: 1px solid #E6E6E6;
}

.incidentCellBottomRight
{
    max-height: 100px;
    min-height: 30px;
    width: 520px;
    padding-left: 20px;
    padding-right: 10px;

    display: block;
    float:right;
    overflow: hidden;
}

.multilineEllipseText
{
    max-height: 100px;
    color: black;
    width: 520px;
}

JavaScript

$(function() {
    var textContainerHeight= $('.incidentCellBottomRight').height();
    
    $('.multilineEllipseText').each(function () {
      var $ellipsisText = $(this);
        
      while ($ellipsisText.outerHeight(true) > textContainerHeight) {
        $ellipsisText.text(function(index, text) {
          return text.replace(/\W*\s(\S)*$/, '...');
        });
      }
    });
});