JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <link rel="stylesheet" href="main.css" />
  <body>
  <div class="comments">
    <input type="radio" id="expand-1" />
    <div class="post-content">
        <div class="measure"></div>
  
        <div class="post-message"><p style="margin-bottom:10px">Lorem ipsum dolor sit amet.</p> There are 2 common lens shapes: flat and spherical. REI lists this information in the product specs on REI.com. 
</div>
        <!--label for="expand-1" class="btn">see more</label-->
        
        <div class="runner">
            <div class="row"><label for="expand-1" class="btn">see more</label></div>
        </div>
        <div class="runner2"></div>       
    </div>

    
    <input type="radio" id="expand-2" />
    <div class="post-content">
        <div class="measure"></div>
        <div class="post-message">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Curabitur ut est et arcu euismod aliquam. In fermentum ipsum
            in tortor aliquam consectetur. Morbi porta, dolor eget ultricies tempus,
            augue sem venenatis turpis, quis varius felis purus eu nulla. Ut a nulla
            eu ipsum porttitor sagittis at eu nunc. Nunc lobortis ipsum et diam aliquet
            at vulputate nunc tincidunt.
        </div>
        <div class="runner">
            <div class="row"><label for="expand-2" class="btn">see more</label></div>
        </div>
        <div class="runner2"></div>  
    </div>
    
    <input type="radio" id="expand-3" />
    <div class="post-content">
        <div class="measure"></div>
        <div class="post-message"><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. </p>Curabitur ut est et arcu euismod aliquam. In fermentum ipsum
            in tortor aliquam consectetur. Morbi porta, dolor eget ultricies tempus,
            augue sem venenatis turpis, quis varius felis purus eu nulla. Ut a nulla
            eu ipsum porttitor sagittis at eu...

CSS

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + div {
    overflow: auto;
    max-height: none;
}
input[type="radio"]:checked + div > .btn,
input[type="radio"]:checked + div > .runner > .row {
    display: none;
}
.post-content {
    max-height: 113px;   
    overflow: hidden;
    line-height: 22px;
    margin-top: 20px;
    margin-left: -100%;	
	border: dashed 1px red;
	position: relative;
}
.post-message {
    float: right;
    width: 50%;
}
.comments {
    width: 100%;
    position: relative;
}
.measure {
    float: left;
    -border: solid 1px black;
    height: 80px;
    width: 49%;
}
.runner {
    -border: solid 1px lime;
    float: left;
	width: 49%;
	margin-left: -1px;
    height: 33px;
}
.runner2 {
    display: none;
    -border: solid 1px lime;
    float: left;
	width: 49%;
	margin-left: -1px;
    height: 33px;
}
.row {
    -border: solid 1px blue;
    position: absolute;
    width: 100%;
    height: 33px;
	background: -webkit-gradient(linear, left top, left bottom,
			from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to bottom, rgba(255, 255, 255, 0), white 50%, white);			
	background: -o-linear-gradient(to bottom, rgba(255, 255, 255, 0), white 50%, white);
	background: -ms-linear-gradient(to bottom, rgba(255, 255, 255, 0), white 50%, white);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white 50%, white);
}
.btn {
   color: blue;  
   position: absolute;
   left: 75%;
   margin-top: 5px;
   margin-left: -60px;   
}
.btn:hover {
    text-decoration: underline;
    cursor: pointer;
}
.shadow {
    position: absolute;
    background: orange;
    left: 0;
    right: 0;
    height: 22px;
    z-index: 10;
}