html5 - how to make the same height of div take a look below -

Please see the image below, I have tried to make a similar design, but there are some problems in it, Item is low 4 This is currently showing some white spaces under Fidler I .p-group {line-height: 6.2; which is not good for two or more four items, someone used me again code> ul li

  .p to list list items. {Overflow: Hidden; Width: 100%; } .p-left {float: left; / * Background: #fdd; * /} .test {float: left; Background: #sacac; White color; Font-family: "Century Gothic"; Font-size: 14px; } .test: hover {cursor: indicator; Background: # 2F7AC6; } .ht {min-height: 180px; } .p-group {margin-top: 5px; -MMS-transform: rotate (270deg); / * IE 9 * / -mose-transform: Rotate (270 degrees); / * Firefox * / -Widbid-transform: rotate (270 degrees); / * Safari and Chrome * / -O-Transform: Rotate (270deg); / * Opera / Overflow: Hidden; }. P-Right {range: 1px solid #ff; White color; Hidden flurry; Width: 75%; } .p-item {float: left; Width: 100px; } .i-left {overflow: hidden; } .p-item div {border: 1px solid white; Background: #Secca; White color; Font-family: "Century Gothic"; Font-size: 14px; Padding: 2px; } .p-item div: hover {background: # 428ad2; Cursor: indicator; } & Lt; Div class = "p" & gt; & Lt; Div class = "p-left" & gt; & Lt; Div class = "a-left" & gt; & Lt; Div class = "test" & gt; & Lt; Div class = "p-group" & gt; Group & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "p-item" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; Div & gt; B & lt; / Div & gt; & Lt; Div & gt; C & lt; / Div & gt; & Lt; Div & gt; D & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "a-left" & gt; & Lt; Div class = "test" & gt; & Lt; Div class = "p-group" & gt; Group & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "p-item" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; Div & gt; B & lt; / Div & gt; & Lt; Div & gt; C & lt; / Div & gt; & Lt; Div & gt; D & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "p-right" & gt; & Lt; Div class = "ht" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

please check it out

  .p {width: 100%; Display: Table; Table-layout: Fixed; } .p-left {display: table-cell; Width: 200px; Background: # 333; Padding: 10px; Color: #fff; } .p-right {display: table-cell; Background: # 666; }  

  & lt; Div class = "p" & gt; & Lt; Div class = "p-left" & gt; & Lt; Div class = "a-left" & gt; & Lt; Div class = "test" & gt; & Lt; Div class = "p-group" & gt; Group & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "p-item" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; Div & gt; B & lt; / Div & gt; & Lt; Div & gt; C & lt; / Div & gt; & Lt; Div & gt; D & lt; / Div & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; Div & gt; B & lt; / Div & gt; & Lt; Div & gt; C & lt; / Div & gt; & Lt; Div & gt; D & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "a-left" & gt; & Lt; Div class = "test" & gt; & Lt; Div class = "p-group" & gt; Group & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "p-item" & gt; & Lt; Div & gt; & Lt; / Div & gt; & Lt; Div & gt; B & lt; / Div & gt; & Lt; Div & gt; C & lt; / Div & gt; & Lt; Div & gt; D & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "p-right" & gt; & Lt; Div class = "ht" & gt; & Lt; / Div & gt; & Lt; / Div & gt;