JSFiddle - React, Tailwind, and code Playground

HTML

<div class="liste">
  <div class="item">
    <input type="checkbox" id="item1" class="toggle">
    <div class="content">
      <div class="img"></div>
      <label for="item1">Afficher</label>
      <div class="texte">
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      </div>
    </div>
  </div>
  <div class="item">
    <input type="checkbox" id="item2" class="toggle">
    <div class="content">
      <div class="img"></div>
      <label for="item2">Afficher</label>
      <div class="texte">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.</p>
      </div>
    </div>
  </div>
  <div class="item">
    <input type="checkbox" id="item3" class="toggle">
    <div class="content">
      <div class="img"></div>
      <label for="item3">Afficher</label>
      <div class="texte">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </div>
  </div>
  <div class="item">
    <input type="checkbox" id="item4" class="toggle">
    <div class="content">
     ...

CSS

*,
  *:after,
  *:before{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    color: inherit;
    line-height: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
  }
  html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-rendering: optimizeLegibility;
    color: #000;
  }
  body {
    background: #ddd;
    margin: 3em auto 3em;
  }
  .liste {
    background: #fff;
 
    padding: .5em;
    margin: 0 auto;
    max-width: 800px;
    column-count:2;
    column-width:380px
  }


  .item {

    padding: .5em;
    margin-bottom: 2em;
    counter-increment: item;
    display:inline-block;width:100%
  }
  .item .img {
    background: #09F;
  }
  .img:before {
    font-size: 30px;
    color: white;
    text-align: center;
    display: block;
    padding: 3em;
    content: counter(item);
  }
  .item .texte {
    display: none;
    padding: 1em;
    margin-top: 1em;
    background: #000;
  }
  
  .item .texte {
    display: none;
    padding: 1em;
    margin-top: 1em;
    background: #ddd;
  }
  
  .item label {
    color: #EA0;
    display: block;
    font-weight: bold;
    margin-top: 1em;
    text-align: center;
  }
  .item label:hover {
    color: #000;
    cursor: pointer;
  }
  .toggle:checked + .content > label {
    color: #000;
  }
  .toggle {
    display: none !important;
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .toggle:checked + .content > .texte {
    display: block;
  }