CSS display: inline-block drops to next line

Question

I have a simple grid that I am testing out.

I decided to change something from float: left to display: inline-block in the attribute select

Answer 1

        
China
    
    

        

            

                
The Flight
                
The City
                
The Island
                
The Food
            
        

            
The City
            
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
            
Resize the browser window to see how the content respond to the resizing.
        
    

small hack, try these it ignores the whitespace

EDIT: and if you want to remove the tiny gap to your header:

.col-9 {
  vertical-align: top;
}

demo