html - Align two inline-blocks next to another inline-block -

I want to align two inline blocks next to each other inline block so that one big square and two small squares can be On the right side, two small sections should form a column, and this column should be next to the larger square.

So I first added a big square with float: left and first small square then I thought that when I add the last square, it will be placed below the small square first. But no, put it on the right side of the small square first.

Here's an example: and code:

HTML

  & lt; Div id = "i1" & gt; & Lt; / Div & gt; & Lt; Div id = "i2" & gt; & Lt; / Div & gt; & Lt; Div id = "i3" & gt; & Lt; / Div & gt;   
 css  
  # i1 {background color: blue; Width: 140px; Height: 140px; Display: Inline-block; Swim left; } # I2 {background color: green; Width: 70px; Height: 70px; Display: Inline-block; } # I3 {background color: red; Width: 70px; Height: 70px; Display: Inline-block; }   
 So what I want is that in the example, the red square goes straight to the green color and sticks to the blue color. Thanks!  
 Edit: The problem is resolved, thanks for all your quick replies!    
 
 
  code:   
  
 
 
  # i2 {background color: green; Width: 70px; Height: 70px; Display: Table; }   
 This resolves your objective ..  
 
 I want the red square to go just below the green in the example and blue one .   
 Hope it helps.