JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<div class="card">
  <div class="title">
    <div class="content">
      Nulla aut explicabo est magni quis et qui. Suscipit nam qui laboriosam ex unde impedit aut. Cupiditate est non iusto eos tenetur aliquid eos aspernatur accusantium nihil.
        <a href="some href">show more</a>
    </div>
  </div>
</div>


<div class="flex-parent">

  <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you This is a long string that is OK to truncate please and thank you This is a long string that is OK to truncate please and thank you OK to truncate please and thank you This is a long string that is OK to truncate please and thank you OK to truncate please and thank you This is a long string that is OK to truncate please and thank you <button>
    SHOW MORE
    </button>
  </div>
  
  <div class="flex-child short-and-fixed">
    
  </div>
  
</div>

CSS

.card {
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

.title
{
    position: relative;
    padding-top: 8px;
    padding-bottom: 8px;
}
.content{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flex-parent {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 30px 0;
}

h2 {
  font-size: 1rem;
  font-weight: normal;
}

.long-and-truncated {
  flex: 1;
  width: 300px;
height: 4em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden; 
}

.short-and-fixed {
  white-space: nowrap;
}
.short-and-fixed > div {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: lightgreen;
  display: inline-block;
  flex-align: bottom;
}

.long-and-truncated-with-child {
  flex: 1;
}