JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<!--  ITEM  -->
<div class="vendor_container">

<div class="item"><div class="img"><img src="http://hloe.co.uk/black.gif"></div></div>
<div class="item">

<div class="txt"><h2>This is a vendor</h2>

<a href="javascript:;" onclick="tog(this)" class="more_txt_hidden">
<span class="more_txt_hidden">
<p>
Etiam in pretium mi, eu facilisis mi. Sed nulla turpis, fringilla at porta eu, porta et eros. In hac habitasse platea dictumst. Vestibulum vel tempor magna.
</p>
</span>
<div class="more_but">Read More</div></a>

</div>

</div>

</div>

<!--  ITEM  -->
<div class="vendor_container">

<div class="item"><div class="img"><img src="http://hloe.co.uk/black.gif"></div></div>
<div class="item">

<div class="txt"><h2>This is a vendor</h2>

<a href="javascript:;" onclick="tog(this)" class="more_txt_hidden">
<span class="more_txt_hidden">
<p>
Etiam in pretium mi, eu facilisis mi. Sed nulla turpis, fringilla at porta eu, porta et eros. In hac habitasse platea dictumst. Vestibulum vel tempor magna.
</p>
</span>
<div class="more_but">Read More</div></a>

</div>

</div>

</div>



</div>

CSS

body {margin:0;font-size:10px;font-family:Arial;}

.container {max-width: 1200px; margin:auto;padding:0 2em;}

.img img {width:100%;height:auto;display:block;}

.vendor_container {max-width: 1200px;margin: auto;border: solid #222222;border-width:1px;margin-bottom:2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: flex-start;
    }
    
.item {width: 50%;}

.txt {padding-left:1em;}
.txt p {font-size:1.6em;line-height:1.6em;}
.txt h2 {font-size:1.9em;}

.more_txt_hidden span {display:inline;}
.more_txt_show span {display:inline;}
.more_txt_show, .more_txt_hidden {color:#222222;text-decoration:none;}
.more_but {display:none;text-align:right;color:blue;text-decoration:underline;margin-bottom:1em;font-size:1.6em;color:#222222;}


@media only screen and (max-width: 768px) {
  .more_but {display:block;}
  .more_txt_hidden span {display:none;}
  .item {width: 100%;}
  .txt {padding-left:0;}
  .vendor_container {border-width:1px 0;}
  }

JavaScript

function tog(el) {

if(el.className == "more_txt_hidden") {
el.className = "more_txt_show";
el.children[1].innerHTML = "Hide";

}
else {el.className = "more_txt_hidden";
el.children[1].innerHTML = "Read More";
}

}