Is it possible to ensure that my two divs are always aligned, regardless of the content inside them? Sometimes the left div may contain images of varying sizes, while the right div may have text with different lengths. I initially tried setting a min-height on both divs, but I'm not sure if this is the best approach.
You can view the code on JSFiddle here: https://jsfiddle.net/532cmwLb/
Here is the original code:
<div class="col-sm-6">
<div class="alert alert-light border clearfix" role="alert">
Modification de la photo - Taille de l'image : 592 * 398 pixels
</div>
... (rest of the original code) ...
---------- Correction i used ----------
<div class="container-fluid pt-3 pb-3">
<div class="row">
<div class="col-sm-6 order-sm-1 mb-3">
<div class="alert alert-light border h-100" role="alert">
Modification de la photo - Taille de l'image : 592 * 398 pixels
</div>
</div>
... (rest of corrected code) ...
</div>
</div>
(The HTML5 and Bootstrap 4 were used in this code)