Pin Interset type column concept

HTML

<div id="main">
<div id="one">kasdhf skadhf jkasdh fadsgfhasgdfjhgsa fadsh isdafuh asiufh oaisud hfuias hfuia hdsiuf hasiud hfuias dhfou ashdofu sahuf hdasuofi huifhuewrhwfnkjsdnaf</div>
<div id="tw">qweriuy qioewur iy fsui faksjhfdsalkjhfhd kjh kasjdfh asfh iusa hfiuasdh fui</div>
<div id="th">asdkfh asdfh dadsiufh iusad haskdhf iasufh saoui fhuas hfoas hduif haosduifh uiasdh fuiadsh fuiash fiuh dsafiuh asdfuisadjifh oiashfusdah ofiu</div>
<div id="fo">kasdhf skadhf jkasdh fadsgfhasgdfjhgsa f</div>
<div id="fi">askfh saidufh asouifh asduf hoasudf hdasu</div>
<div id="si">kasdhf skadhf jkasdh fadsgfhasgdfjhgsa f</div>
<div id="se">alisfh yrewoiuqw yrq yewr afis dp bxzmcv hfudsiao</div>
<div id="ei">alisfh yrewoiuqw yrq yewr afis dp bxzmcv hfudsiaokajh dfsah fuisah foiuh fiusah dfiuashdfjh asjdfh iuas hfsadhfkjsadhf iuash dfiou</div>
</div>

CSS

* {
    box-sizing: border-box;
}
#main {
    width: 400px;
}
#main > div {
    width: 100px;
    float: left;
    border: 1px solid red;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    display: inline-block;
    margin-right: 100%;
    margin-bottom: 100%;
}
#one {
    height: 100px;
    margin-top: 0;
    margin-left: 0;
}
#tw {
    height: 60px;
    margin-top: 0;
    margin-left: 100px;
}
#th {
    height: 100px;
    margin-top: 0;
    margin-left: 200px;
}
#fo {
    height: 60px;
    margin-top: 0;
    margin-left: 300px;
}
#fi {
    height: 40px;
    margin-top: 100px;
    margin-left: 0;
}
#si {
    height: 40px;
    margin-top: 60px;
    margin-left: 100px;
}
#se {
    height: 70px;
    margin-top: 100px;
    margin-left: 200px;
}
#ei {
    height: 110px;
    margin-top: 60px;
    margin-left: 300px;
}