JSFiddle - React, Tailwind, and code Playground

by alexholsgrove

HTML

<section>
  <div class="left">
     <article>
        <h2>My post title</h2>
        <div class="article-content"><p>This is the content for the first article</p></div>
        </article>

     <article>
        <h2>Another post title</h2>
        <div class="article-content"><p>Content for the the second post</p></div>
        </article>

     <article>
        <h2>Third post title</h2>
        <div class="article-content"><p>This is the content for the third post</p></div>
        </article>
  </div>


  <div class="right">

  </div>
</section>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

section {
  display: flex;
}

section > div {
  flex: 0 0 50%;
  padding: 15px;
  width: 50%;
}

.left .article-content {
  display: none;
}

JavaScript

$('.left article').on('click', function(event) {
   var article_content = $(this).children('.article-content').html()
	$('.right').html(article_content);
});