Make divs same width with pure css - html

Question

Is there a pure CSS way to create a div that matches another's div width? There is no parent div.
.green-div-1 {
background-color: #00ba00;
width: 500px;
height: 20px;
}
.blue-div-1 {
background-color: #8888FF;
max-width: 90%;
float: left;
}
.green-div-2 {
background-color: #00ba00;
width: 500px;
height: 20px;
}
.blue-div-2 {
background-color: #8888FF;
max-width: 90%;
float: left;
}
<div class="green-div-1">
<div class="blue-div-1">
<label>long text long text long text long text long text long text </label>
</div>
</div>
<br/>
<div class="green-div-2">
<div class="blue-div-2">
<label>short text</label>
</div>
</div>
Example: https://jsfiddle.net/6kgjnL15/

Answer 1

not sure if this is exactly what you are looking for. but changing max-width to just width then setting that at 100% makes both blue divs identical.
.blue-div-1{
background-color:#8888FF; width:100%; float:left;
}
.blue-div-2{
background-color:#8888FF; width:100%; float:left;
}

Answer 2

Using pseudo elements, you can get the desired result. You can find the code below. However, I highly recommend using JavaScript for your problem, as you can achieve a much more stable and flexible solution.
In case the background-color is not important, try this:
.green-div-1{
background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1{
max-width:90%; float:left;
}
.green-div-2{
background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1::after {
content:"short text";
display: block;
height: 20px;
margin-top: 20px;
}
<div class="green-div-1">
<div class="blue-div-1">
<label>long text long text long text long text long text long text </label>
</div>
</div>
<br/>
<div class="green-div-2">
</div>
else, you could add another element to cover the space in between:
.green-div-1{
background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1{
background-color:#8888FF; max-width:90%; float:left;
}
.green-div-2{
background-color:#00ba00; width:500px;height:20px;
}
.blue-div-1::after {
content:"short text";
display: block;
background-color:#8888FF;
height: 20px;
margin-top: 20px;
}
#space {
height: 20px;
background-color: white;
position: relative;
top: -40px;
}
<div class="green-div-1">
<div class="blue-div-1">
<label>long text long text long text long text long text long text </label>
</div>
</div>
<br/>
<div class="green-div-2">
</div>
<div id="space">
</div>

Answer 3

Actually there is no need of float: left; as they both are in separate div's
try removing the float: left from
.blue-div-1{
background-color:#8888FF; max-width:90%;
}
.blue-div-2{
background-color:#8888FF; max-width:90%;
}
here is the link: https://jsfiddle.net/s8ufxu1m/2/
Also this will help to understand more CSS Box Model: https://css-tricks.com/the-css-box-model/