How to make -webkit-line-clamp dynamic?

Question

I've gone through so many articles trying to find the right answer for my question with no luck and I'm not good enough at JavaScript/jQuery to figure it out.

I have two columns and I've added jQuery to dynamically set the height of column 1 based on column b and have a read more/read less button to toggle the text in column 1.

This is my column 1 text:

// My jQuery works well, the height of text adapts to fit the box (example of code below):

$(document).ready(function() {
  var divHeight = $('.specs').height();
  $('.collapse').css('height', divHeight - 170, 'important');
});

/* This is what controls the ellipsis: */

#summary p.collapse:not(.show) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

#summary a.collapsed:after {
  content: '+ Read More';
}


/* Styling: */

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

.description {
  padding: 5%;
  border-radius: 20px;
  height: 100%;
  background-color: #eff5ff;
}

#summary {
  font-size: 14px;
  line-height: 1.5;
  padding-top: 3%;
}

.underline {
  width: 80px;
  text-align: left;
  margin: 0;
  margin-bottom: 16px;
  border: 1px solid #1975ff;
}

.description-heading {
  color: #1975ff;
  font-size: 20px;
}

.underline {
  width: 80px;
  text-align: left;
  margin: 0;
  margin-bottom: 16px;
  border: 1px solid #1975ff;
}

.info-row {
  width: 100%;
  max-width: 1500px;
  padding-left: 4%;
  padding-right: 4%;
}

.d-md-flex @media (min-width:768px) {
  .d-md-flex {
    display: -ms-flexbox!important;
    display: flex!important;
  }
}

.row {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>


<div class="container info-row">
    <div class="row d-none d-md-flex" style="padding-right: 3%;">
        <div class="col col-md-7" style="padding-left: 5%;">
            <div class="description">
                <h4 class="description-heading">Description:</h4>
                <hr class="underline" />
                <div id="summary">
                    <p id="collapseSummary" class="collapse"><strong>Beautifully durable. By design.</strong><br /><br />A design as jaw-dropping as it is durable, with surgical-grade stainless steel, Ceramic Shield and industry-leading IP68 water resistance.<br /><br /><strong>Big camera upgrade. Bigger photo possibilities.</strong><br /><br />A massive hardware upgrade meets super-intelligent software to bring macro photography to Ultra Wide, 3x optical zoom to Telephoto and Night mode to all cameras.<br /><br /><strong>Shift the focus. Up the drama.</strong><br /><br />Shoot with shallow depth of field and automatically add elegant focus transitions between subjects for far more creative storytelling.<br /><br /><strong>Hello, ProMotion.</strong><br /><br />Meet the Super Retina XDR display with ProMotion. With an adaptive refresh rate up to 120Hz and exceptional graphics performance, you’ve never felt anything like it.<br /><br /><strong>Pure. Pro. Power.</strong><br /><br />Experience fast you can only get on Pro. A chip with the performance to work through pro tasks. And a huge leap in battery life to last all day.◊<br /><br /><button class="landing-button">Learn More</button></p><a class="collapsed" data-toggle="collapse" href="#collapseSummary"></a>
                </div>
            </div>
        </div>
        <div class="col-5 specs" style="padding-left: 5%;padding-top: 2%;">
            <h4 style="color: #1975ff;font-size: 20px;">Features and Specifications:</h4>
            <hr style="width: 80px;text-align: left;margin: 0;margin-bottom: 16px;border: 1px solid #1975ff;" />
            <ul style="font-size: 14px;padding-left: 20px;">
                <li>6.7-inch Super Retina XDR display with ProMotion for a faster, more responsive feel</li>
                <li style="padding-top: 10px;">Cinematic mode adds shallow depth of field and shifts focus automatically in your videos</li>
                <li style="padding-top: 10px;">Pro camera system with new 12MP Telephoto, Wide, and Ultra Wide cameras; LiDAR Scanner; 6x optical zoom range; macro photography; Photographic Styles, ProRes video, Smart HDR 4, Night mode, Apple ProRAW, 4K Dolby Vision HDR recording</li>
            </ul>
            <h4 style="color: #1975ff;font-size: 20px;padding-top: 3%;">In the box:</h4>
            <hr style="width: 80px;text-align: left;margin: 0;margin-bottom: 16px;border: 1px solid #1975ff;" />
            <ul style="font-size: 14px;padding-left: 20px;">
                <li>iPhone 13 Pro</li>
                <li>USB-C Lighting Cable</li>
                <li>USB-C Lighting Cable</li>
                <li>USB-C Lighting Cable</li>
            </ul>
        </div>
        <div class="col-5 offset-7" style="padding-left: 5%;padding-top: -1%;"></div>
    </div>
</div>

The issue is that I input a -webkit-line-clamp to control the ellipsis but I want to set it to the last line as the height dynamically changes. Perhaps something with jQuery? Any ideas?