JSFiddle - React, Tailwind, and code Playground

HTML

<!-- lien avec fichier css -->
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="menu.css"> <!-- Menu burger-->
        <div class="parent">
   
        <div>
        <img id="ligne_1_rangee_1" src="https://picsum.photos/200" alt="coolock_img_ligne1_boite">
        <img id="ligne_1_rangee_2" src="https://picsum.photos/200" alt="coolock_img_ligne1_bouteouverte">
        <img id="ligne_1_rangee_3" src="https://picsum.photos/200" alt="coolock_img_ligne1_zoom_plateau">

        <img id="ligne_2_rangee_1" src="https://picsum.photos/200" alt="coolock_img_ligne2_var1">  
        <img id="ligne_2_rangee_2" src="https://picsum.photos/200" alt="coolock_img_ligne2_var2">  
        <img id="ligne_2_rangee_3" src="https://picsum.photos/200" alt="coolock_img_ligne1_2">  

        <img id="ligne_3_rangee_1" src="https://picsum.photos/200" alt="coolock_img_ligne3_plateau_entier">
        <img id="ligne_3_rangee_2" src="https://picsum.photos/200" alt="coolock_img_ligne3_zoom_puzzle">
        <img id="TIcoolock" src="https://picsum.photos/200" alt="titrecoolock">
        </div>
 
        <div id="DTXcoolock">
            <p id="TXcoolock">Création d’un jeu de société, à la découpeuse laser et en impression 3D, de façon à mettre en avant les principes nécessaires à la cohésion  d’un groupe. Volonté de réaliser un jeu au sein duquel la collaboration et le partage de connaissance sont nécessaires pour avancer.<br> Principe du jeu : il y a quatre types de personnages qui ont chacun une couleur. Le plateau de jeu est jonché de cadenas des quatre couleurs des personnages. Chaque joueur peut ouvrir les cadenas de sa couleur mais s’il se trouve devant un cadenas d’une autre couleur que la sienne il est bloqué et à besoin que l’un de ses coéquipiers vienne l’aider. Pour gagner les joueurs doivent traverser le plateau en ramassant les portions de puzzle et en évitant les fantômes.</p>
        </div>
        </div>

CSS

/* COOLOCK */

#ligne_1_rangee_1 {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 4%;
    padding-right: 1.5%;
    
    width: 31%;
    height: auto;
}
#ligne_1_rangee_2 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 28%;
    height: auto;
}
#ligne_1_rangee_3 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 28%;
    height: auto;
}


#ligne_2_rangee_1 {
    padding-bottom: 1.5%;
    padding-left: 4%;
    padding-right: 1.5%;
    
    width: 13%;
    height: auto;
}
#ligne_2_rangee_2 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 18%;
    height: auto;
}
#ligne_2_rangee_3 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 32.8%;
    height: auto;
}

#ligne_3_rangee_1 {
    padding-left: 4%; 
    
    width: 37%;
    height: auto;
}
#ligne_3_rangee_2 {
    padding-left: 1.5%;
    
    width: 11.25%;
    height: auto;
}
#TIcoolock {
    padding-left: 1.3%;
    
    width: 3.13%;
    height: auto;
}
.DTXcoolock {
    loat: right;
    margin-right: 5%;
    padding-top: 4.7%;

    width: 36%;
}
#TXcoolock {
    font-family: sans-serif;   
}

.parent{
  display: flex;
  align-items: flex-end;
}