Is there a way to adjust the width of two div elements when floated left so that if the right div is empty, the left div automatically expands to 100% width?
if ($('.wrap .box2').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1>Hello 2</h1>
</div>
</div>In summary, I am looking for a way to make the width of the left div 100% when the right div does not have text inside its h1 element.