Check out the following code snippet.
The CSS Code snippet is given below:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.parent {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.child1 {
width: 30%;
height: 100%;
display: inline-block;
}
.child2 {
width: 70%;
height: 100%;
display: inline-block;
}
The objective was to make child1 and child2 widths proportional to the parent's width. Child1 should be 30% of Parent's width while Child2 should be 70% of Parent's width. Unfortunately, the implementation causes Child2 to wrap to a new line.
Below is the HTML Code snippet:
<div class="parent">
<div class="child1">
Hello
</div>
<div class="child2">
Hello
</div>
</div>
Find the live demonstration at: