JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container">
  <div class="row row_2">
    <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150 px;">
    </div>
    <div class="clearfix"></div>
    <div class="col-12 col-md-6" id="offres" style="height: 250px; display: none;">
    </div>
    <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150px;">

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}
#offres {
  border: 3px solid red;
}
.test {
  height: 100px;
  border: 3px solid green;
}

JavaScript

$(document).ready(function() {
    console.log("ready!");
    $(".test").click(function() {
        $(".test").hide();
        $("#offres").show();
    });
});