CSS Float Horizontal Overflow - html

Question

I have the following jsfiddle: https://jsfiddle.net/CLight/1emh82cv/
This is a recursive structure where it consists of two twin cells sharing the top row, and one cell in the second/bottom row. The three cells will be recursively inserted into the bottom cell. I am trying to figure out how to make the cells expand horizontally when they overflow, without breaking the structure. Thanks a bunch.
Here's the html:
<div class="cell-main">
<div class="cell-left">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
</div>
</div>
</div>
Here's the CSS:
*{
box-sizing: border-box;
}
div{
border: 1px solid black;
}
.cell-left {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:left
}
.cell-right {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:right
}
.cell-bottom {
height: 100%;
padding: 5px;
width: 94%;
margin-left: 3%;
float: left;
}
.cell-main {
height: 100%;
padding: 5px;
width: 100%;
float:left;
}
EDIT: Updated jsfiddle and title.

Answer 1

I think you are searching for the overflow-wrap property.
The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. (Mozilla MDN)
This property can have the following values, in case you need it recursive, the global values can be interesting for you:
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
If you want to keep the height of the parcel use overflow: auto on the main div's.
See my code snippet!
*{
box-sizing: border-box;
}
div{
border: 1px solid black;
overflow-wrap: break-word;
}
.cell-left {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:left
}
.cell-right {
height: 100%;
padding: 5px;
width: 50%;
float: left;
text-align:right
}
.cell-bottom {
height: 100%;
padding: 5px;
width: 94%;
margin-left: 3%;
float: left;
}
.cell-main {
height: 100%;
padding: 5px;
width: 100%;
float:left;
}
<div class="cell-main">
<div class="cell-left">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
<div class="cell-bottom">
<div class="cell-left">
test
</div>
<div class="cell-right">
test
</div>
</div>
</div>
</div>