JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<br><br>
<div class="box2">
  <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> 
</div>

CSS

.box1 {
  width: 300px;
  height: 60px;
  background: green;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.box2 {
  width: 300px;
  height: 60px;
  background: red;
  line-height: 60px;
  overflow: hidden;
}

.text {
  line-height: 1em;
  display: inline-block;
  vertical-align: middle;
}