JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="product">
      <div class="picture"></div>
      <div class="details">
        <div class="name">Name</div>
          <div class="description">Description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
        <div class="links">Links</div>
      </div>
  </li>
</ul>

CSS

ul li {
  width: 400px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
}

.picture {
  float: left;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

.details {
  float: left;
  height: 100px;
  width: 286px;
  margin-left: 10px;
}

.name {
  height: 18px;
  border: 1px solid #000;
}

.description {
  height: 60px;
  font-size: 14px;
  line-height: 21px;
  overflow-y: hidden;
  border: 1px solid #000;
}

.links {
  height: 18px;
  border: 1px solid #000;
}