I need to adjust the width of .center. There are multiple rows, some with a button and others without. Since it loads dynamically, the width of .center should vary for each row.
For instance, in the first row, .center should have a width of centerWidth2
In the second row, .center should have a width of centerWidth1
This is the desired layout, but the challenge is that I don't always know when .right is visible or not. Therefore, I want .center to automatically adjust its width based on the visibility of .right.
var centerWidth1 = $('#wrap').width();
var centerWidth2 = $('#wrap').width()-55;
$("#first").css('width', centerWidth2);
$("#second").css('width', centerWidth1);#wrap {
position: relative;
margin: 20px auto;
width: 80%;
background-color: red;
}
.row {
position: relative;
height: 30px;
margin-bottom: 10px;
}
.center {
float:left;
min-height: 30px; line-height: 30px;
display: inline-block;
text-align: center;
background-color: blue;
}
.right {
float:left;
width: 50px; height: 30px; line-height: 30px;
display: inline-block;
text-align: center;
margin-left: 5px;
border:0;
background-color: grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="wrap">
<div class="row">
<div class="center" id="first">center</div>
<div class="right">right</div>
</div>
<div class="row">
<div class="center" id="second">center</div>
</div>
</div>