Place third float div at same level with first div - css

Question

I have the next html strcture that I can't change it https://jsfiddle.net/fLjs43x7/ :
HTML:
<div class="grid-parent">
<div class="something">
<div class="something-else">
<div class="grid-100">
</div>
<!--- .grid-100 -->
<div class="grid-60">
1
</div>
<!-- .grid-60 -->
</div>
<!-- .something-else -->
<div class="grid-60">
2
</div>
<!-- .grid-60 -->
</div>
<!-- .something -->
<div class="grid-30">
</div>
<!-- .grid-30 -->
</div>
<!-- .grid-parent -->
I want to place green div at same level with first blue div. How can I do this? It's possible?
Thank you!
I think I found a solution:
I added
.something {
height: 1px;
overflow: visible;
}
And I change the middle float div:
.grid-606 {
display: inline-block;
float: none;
}
Here is the entire code: https://jsfiddle.net/fLjs43x7/2/

Answer 1

I am using position property;
See this:--
hope it helps.
.grid-parent {
display: block;
width: 1000px;
height: 300px;
position:relative;
overflow: hidden;
background-color: red;
}
.grid-30,
.grid-60,
.grid-100 {
display: block;
float: left;
height: 50px;
margin-left: 10px;
margin-bottom: 10px;
}
.grid-100 {
width: 1000px;
background-color: yellow;
}
.grid-60 {
width: 600px;
background-color: blue;
}
.grid-30 {
width: 300px;
background-color: green;
position:absolute;
left:600px;
top:60px;
}
<div class="grid-parent">
<div class="something">
<div class="something-else">
<div class="grid-100">
</div> <!--- .grid-100 -->
<div class="grid-60">
1
</div> <!-- .grid-60 -->
</div> <!-- .something-else -->
<div class="grid-60">
2
</div> <!-- .grid-60 -->
</div> <!-- .something -->
<div class="grid-30">
</div> <!-- .grid-30 -->
</div> <!-- .grid-parent -->