I am facing an issue with two divs that are supposed to be displayed side by side in a normal browser. However, when the browser window is resized, the first div loses its height and the second div overlaps into it. I attempted to set the body's min height to 100%, but unfortunately, this did not resolve the problem.
<div class="col-lg-8 col-md-8 col-sm-8">
<h1>Inventar</h1>
<div class="inventar">
<div class="img_div" id="822273846">
<img src="IMG URL" alt="" class="img-responsive">
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="item-overview" id="detail_822273846">
<!-- IMAGE -->
<img src="IMG URL" alt="" class="img-responsive">
<!-- HR -->
<hr>
<!-- NAME -->
<h3>P90 | Sand Spray</h3>
<!-- DESCRIPTION -->
<p>Easily recognizable for its unique bullpup design, the P90 is a great weapon to shoot on the move due to its high-capacity magazine and low recoil. It has been spray-painted freehand with short, thick lines in contrasting colors.
<i>Perfect for the insurgent on the go</i></p>
<p>Type: Consumer Grade SMG</p>
<!-- HR -->
<hr>
<input type="submit" name="submit" class="btn btn-primary btn-lg btn-block" value="Sell"></button>
<br/>
</div>
</div>