Display: inline-block: the first div is shorter than the second; filling this space

Question

I have three divs: a , b and c . They are 48% wide and displayed as inline blocks. This style will be applied to multiple pages. Div a will always be shorter than div b . This creates a gap between the bottom of a and the top of c . (Divs a and b will be slightly different in height on each page, but a will always be shorter. Due to inconsistent heights, I don’t feel like I can reliably use margin-top: -10px, for example.)

Like this:

How i want:

change
Mobile phone:

/ Change

CSS

div {
     width:48%;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

@media only screen and (max-width: 600px) {
     div {
          width:100%;
     }
}

HTML

<div style="border-color:red;">a<br>a</div>
<div style="border-color:green;">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div>
<div style="border-color:blue;">c<br>c<br>c<br></div>

A media query allows three divs to fit into a single column with smaller screen sizes. This is why the div should be in that order.

Answer 1

A bit complicated due to the dual layout. Saving the same html layout you have, this can be done using the selector for the elements, and the other for the element "b" (class or nth-child (2) or ...), related to float and margin.

(change the media in the code snippet to check the layout change)

div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}

div.b{clear:none;float:right;margin-right:2%}

@media only screen and (max-width: 200px) {
     div {
          width:100%;float:none;clear:both;
     }
     div.b{margin-right:0;float:none;clear:both;}
}

<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>

Run codeHide result

Answer 2

set for min-heightall equal in length.

div {
     width:48%;
     min-height:300px;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}