JSFiddle - React, Tailwind, and code Playground

HTML

<!--OPTION 1 -->
<p>OPTION 1. RADIO BUTTONS. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p><input type=checkbox id="More"><label for="More">MORE</label>

<div id="Art1">
  <p>
  Second part of Lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The End of Option 1.</p>
<input type=checkbox id="Less"><label for="Less">LESS</label>
  
</div>

<!--OPTION 2 -->

<div id="option2a" class="option2">
  
  <p>OPTION 2. MODAL OPTION. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
  </p><a href="#option2b">MORE</a>

<div id="option2b" class="overlay">
  <div class='text2b'>
  <p>
  Second part of of MODAL OPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The end. </p>
  
  <a class="close" href="#">CLOSE</a>
 
 </div>
 </div>
<p>
 Other stuff... Meant only to check positioning of Modal.
</p>

CSS

/*OPTION 1*/
#More,#Art1 {display: none} /*hides checkbox and 2nd part of article */

#More:checked~#Art1 {
	display: block;
}

/*Trying to get it to close: */

#Less {
  display: none} /*not sure why checkbox still appears */
#Less:checked~#Art2 {
	display: none;
}  

/* OPTION 2 */
.option2 {
  background-color: yellow;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.text2b {
  background: #bbb;
  border-radius: 5px;
  width: 70%;
  position: relative;
  transition: all 5s ease-in-out;
}

.text2b .close {

  transition: all 200ms;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}