html - How to make element occupy remaining width of container? -

i have inline div abc , inline div def. abc's width 100px. how can let def appear on right while def's width parent's width minus 100px?

i cannot width:100%; since def appears next line.

https://jsfiddle.net/h7k87vwx/

<div class="abc">abc</div> <div class="def">def</div> <div class="ghi">ghi</div> 

.abc {     display:inline-block;     background-color:lightblue;     width: 100px; }  .def {     display:inline-block;     background-color: lightyellow;     width: 200px; } 

html

<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div> 

css

.def {     display: inline-block;     background-color: lightyellow;     width: calc(100% - 100px); } 

demo: https://jsfiddle.net/h7k87vwx/6/

divs lined eliminate rendered white space. explanation see answer here:

• inline-block boxes not fitting in container