JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="list">
  <div class="item">
    Alpha
  </div>
  <div class="item">
    Bêta
  </div>
  <div class="item" style="display: none;">
    Gamma
  </div>
  <div class="item" style="display: none;">
    Delta
  </div>
</div>
<br>
<button type="button">
Click me !
</button>
<br>
<p>
Nous voulons ici une suite d'éléments alignés par display: inline-block;<br>
Cliquez sur le bouton et vous pouvez voir que l'affichage correspond à ce que l'on attendait<br>
et cela car nous avons défini que cet élément devait être masqué directement dans HTML.
</p>

CSS

.item {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 8px;
  border: 1px solid red;
}
.item.hide {
  display: none;
}

JavaScript

$(function() {
	$("button").click(function() {
  	$(".item:hidden").show();
  });
});