JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Page2">

	<div class="button-container">
<div class="ellipsis">
     <span>
       I have a long text that display in div this div has  fixed width and height, I want the text will be displayed in a few lines (as the div height) and that the sentence words will not break(word prefix in one line and the continue in the next line) furthermore I want to add ellipsis at the end of the last sentence.
      </span>
</div>
  <div style="width: 20%;" class="right-container">picture</div>
</div>

CSS

.ellipsis {
    float:left;
    display: -webkit-box !important;
    max-width: 400px !important;
    max-height: 100px !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border:solid;
}		


.right-container {
  float: right;
    border:solid;
}