html - Horizontally align text within absolute position -

I'm trying to remove a box. Within this box, I want to make the position of some elements in the top left and right corners, then by dragging additional elements down the hinge on the lower part of the box, but now not in the corners.

The lower left element, I want to focus it on the left column / half of the box, while I want to combine the right element under its right column / half box.

I have created a JSFDial to make it clear what I am doing. I have to align the lower texts in the lower part of the box to position: complete; Bottom: 0 , although text-align properties do not appear to do anything now.

What can I do to get these alignments again? Thanks!

EDIT: I have updated jsfiddle to use the stylesheet. The goal is to preserve the placement of the text below each column. In the lower left, I want to focus the text inside my column. On the lower right, I want to right-align the text in my column too.

You need Divs to assign a width to text alignment. For example, you can take half width of each box:

  .bottom-left {left: 0; Correct: 50%; }. Bottom-right {left: 50%; Correct: 0; }