Getting inline-block element's height to fill the parent

Question

I have a container with two items. One of those items is a select element, so I need to set the size attribute via HTML. I want the other item in

Answer 1

No answers here gave me comfort so I went and search for the truth. I added a bit more css to make a point on the spacing between two boxes.

CSS:

 .wrapper {
  background-color:gray;
}

.container {
    margin: 25px auto;
    display: inline-flex;
}

.leftbox {
    height: inherit;
    display: inline-block;
    border: 1px solid #D7D2CB;
    background-color: #FFFFFF;
    border-radius: 5px;
    max-width: 550px;
    margin-right: 18px;
    align-items: stretch;
    padding: 15px;
    width: 100%;
}

.rightbox {
    height: 100%;
    display: inline-block;
    border: 1px solid #D7D2CB;
    background-color: #FFFFFF;
    border-radius: 5px;
    align-items: stretch;
    max-width: 300px;
    width: 100%;
    padding: 20px 15px;
}

HTML:

  

    

      There is something here, I am not avoiding it.
    
    

      Probably something else here but much much much much much much much much much much much much much much much much much much much much much much much much much much much much much bigger.
    
  

Check the codepen: https://codepen.io/anon/pen/XRNMMp