How to prevent inline-block elements from stacking?

Question

I have two divs (divA and divB). I'm using display:inline-block to position them side-by-side. Each div has a width percentage. The problem is my layout is responsive, and I have tried using float but it breaks my layout. On smaller screens the 2 divs are not inline, DivB moves under DivA.

.divA {
background-color:#CCC;
height:40px;
width:40px;
display:inline-block;
vertical-align:top;
margin-right:15px;
}

.divB {
background-color:#0FF;
height:auto;
width:85%;
display:inline-block;
vertical-align:top;
}



<div class="divA"></div>
<div class="divB"></div>

How can I make it so the width of divB automatically adjusts to the width of the screen and also remains inline with divA? Nothing I am trying is working.

Thanks for your help.

***EDIT

This is the solution:

.container {
height:100%;
width:auto;
padding-top: 15px;
padding-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}

.divA { 
background-color:#CCC;
height:40px; width:40px;
display:inline-block; 
vertical-align:top; 
margin-right:15px; 
} 

.divB { 
background-color:#0FF; 
height:100%; 
width: calc(100% - 60px); 
display:inline-block; 
vertical-align:top; 
} 

This method is perfect if you're using a responsive design because you don't have to float the divs. Using this method, divA (a 40px by 40px square) will remain on the left, while divB (a rectangular div) will remain on the right. The width for divB will increase or decrease based on the width of the screen, and the div will remain to the right of divA no matter how small the screen becomes.

You can change divA's dimensions, as long as you adjust the width of divB:

width: calc(100% - 60px);

Answer 1

Try this

plnkr

.divA {
  background-color:#CCC;
  height:40px;
  width:40px;
  display:inline-block;
  vertical-align:top;
  margin-right:15px;
  float: left;
}

.divB {
  background-color:#0FF;
  height:40px;
  width: calc(100% - 55px);
  display:inline-block;
  vertical-align:top;
  float:left;
}

I use calc to calculate the width of divB base on (100% width - 40px width of divA - 15px margin-right) . Then float left them to remove the space (between inline-block element)