how to force divs to span 100% of the available height and width

Question

I have the following template:

<div>
    <div style="display:inline-block;background-color:#ccc;">
        Data
    </div>
    <div style="display:inline-block;background-color:#ccc;width:80px;">
        <span>Work: 22</span>
        <span>Todos: 33</span>  
    </div>  
</div>

But the first nested div does not span all the height available to it. So that both the divs match in height.

Also, I want to force text Data to be at top left.

How to do the same?

Answer 1

 .warp{ display: flex; } 

 <div class="warp"> <div style="background-color:#ccc;"> Data </div> <div style="background-color:#ccc;width:80px;"> <span>Work: 22</span> <span>Todos: 33</span> </div> </div> 

if you want space btween those divs:
use margin-right

  .warp{ display: flex; } .data{ margin-right: 7px; } 

  <div class="warp"> <div style="background-color:#ccc;" class="data"> Data </div> <div style="background-color:#ccc;width:80px;"> <span>Work: 22</span> <span>Todos: 33</span> </div> </div> 

Answer 2

just make display: flex to parent div

 <div style="display: flex;"> <div style="display:inline-block;background-color:#ccc;"> Data </div> <div style="display:inline-block;background-color:#ccc;width:80px;"> <span>Work: 22</span> <span>Todos: 33</span> </div> </div> 

Answer 3

Assuming you still want the space between the two divs:

 .container { display: flex; } .data { background-color: #ccc; width: 40px; padding-left: 2px; margin-right: 5px; } .input { background-color: #ccc; width: 80px; padding-left: 2px; } 

 <div class="container"> <div class="data"> Data </div> <div class="input"> <span>Work: 22</span> <span>Todos: 33</span> </div> </div> 

Answer 4

Below is the change you need to do:

 <div style="display: flex;"> <div style="background-color:#ccc;width:40px;"> Data </div> <div style="background-color:#ccc;width:80px;"> <span>Work: 22</span> <span>Todos: 33</span> </div> </div> 

Answer 5

If you dont want to fix the height, or use flex - tables can help you with that

<div style="display: table; ">
    <div style="display:table-cell;background-color:#ccc; vertical-align: middle;">
        Data
    </div>
    <div style="display:table-cell;background-color:#ccc;width:80px; vertical-align: middle;">
        <span>Work: 22</span>
        <span>Todos: 33</span>  
    </div>  
</div>

Answer 6

You can Try this Code:

 .parent { display: table; } .parent .child { display: table-cell; vertical-align: text-top; background: #ccc; border-left: 2px solid #fff; } .parent .child span { display: block; } 

 <div class="parent"> <div class="child"> Data </div> <div class="child"> <span>Work: 22</span> <span>Todos: 33</span> </div> </div>