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 class="col-26">
                <p class="p_26"> <b>Poste:</b> Carreleur H/F
                </p>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-12 col-md-6" id="offres" style="height: 250px; display: none;">
            <div class="col-26">
                <h6 class="h_27">Carreleur H/F</h6>
                <p class="p_26"><b>6 decembre 2020, Strasbourg-67</b> 
                </p>
                <button class="btn ml-3 mb-3" type="submit">Postuler</button>
            </div>
        </div>
        <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150px;">
            <div class="col-26">
                <p class="p_26"> <b>Poste:</b> Carreleur H/F
                </p>
            </div>
        </div>
    </div>   
</div>

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();
    });
});