First things first!

Ingredients: two divs aligned horizontally (each has 50% the width of the parent) and some text to put in the first div (left) and then, if overflowing, in the second one (right). The divs are 200px tall.

The text comes from a PHP script that echoes a variable (<p><?php echo $foo; ?></p>) which contains all the text. In brackets I wrote a <p> tag. The DOM looks something like this:

<div class="thecontainer">
    <div class="theleftone">
        <p><?php echo $avariablewithsometext; ?> </p>
    </div>
    <div class="therightone">
        <!-- everything is permitted -->
    </div>
 </div>

Problem: I'm trying to achieve this goal using CSS flex properties but I can't find a way to put the overflowing text from the first div in the second one.

Question: How can I put the overflowing text in the second div leaving the PHP-script clean?

Actual Demo:

.thecontainer{
  width:100%;
  height:100px;
  overflow: hidden;
  display: block;
}

.therightone {
    background-color: red;
    width: 50%;
    height:100px;
    display: block;
    float:right;
}
.theleftone {
   background-color: blue;
   width: 50%;
   height:100px;
   display:block;
   float: left;
}

<div class="thecontainer">
    <div class="theleftone">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </p>
    </div>
    <div class="therightone">
        <!-- everything is permitted -->
    </div>
 </div>