JSFiddle - React, Tailwind, and code Playground
HTML
<div class="my-wrap">
<a href="#one" class="wrap-button-one button">Link One</a>
<div id="one" class="wrap-one one details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
</div>
<a href="#two" class="wrap-button-two button">Link Two</a>
<div id="two" class="wrap-two two details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
</div>
<a href="#three" class="wrap-button-three button">Link Three</a>
<div id="three" class="wrap-three three details">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
</div>
</div>
CSS
.my-wrap {
display: grid;
grid-template-columns: 25% 1fr;
grid-gap: .5rem;
width: 90%;
margin: 50px auto;
color: #fff;
grid-template-areas: " link-one details "
" link-two details "
" link-three details "
" .... details "
}
.wrap-one {
background-color: tomato;
}
.wrap-two {
background-color: blue;
}
.wrap-three {
background-color: green;
}
.button {
text-decoration: none;
background-color: #333;
color: #fff;
padding: 0.5rem 1rem;
transition: all 0.25s;
}
.button:hover {
background-color: #000;
}
.details {
grid-area: details;
display: none;
}
.wrap-button-one {
grid-area: link-one;
}
.wrap-button-two {
grid-area: link-two;
}
.wrap-button-three {
grid-area: link-three;
}
div:target {
display: block;
}
p {
margin: 10px;
}