html - Stack divs vertically with different child alignment -

http://s4.postimg.org/mbrpxn2d9/untitled.png

edit: not duplicate. other question doesn't contain information divs being automatically adjusted words on inside.

i have 4 divs. have 3 divs inside div, , i'm trying float 1 left, 1 center, , 1 right. i'm trying make width , height of divs on inside automatically adjusted width , height of words on inside of divs. want divs on inside stack on top of each other, instead of being on same line. far, got left div float left, , right div float right, cannot middle div centered, nor adjust width , height of word inside of it. please take @ code:

#outer {    border: 1px solid black;    width: 500px;    height: 500px;  }  #innerleft {    border: 1px solid red;    float: left;  }  #innermiddle {    border: 1px solid red;    margin: auto;  }  #innerright {    border: 1px solid red;    float: right;  }

<div id='outer'>    <div id='innerleft'>left</div>    <div id='innermiddle'>middle</div>    <div id='innerright'>right</div>  </div>

depending on output of image, think flexbox solution way go.

1. let container have flexible layout column wrapping.

2. align each item based on position in container i.e. flex-start, center , flex-end

#outer {    display: flex;    display: -ms-flex;    flex-flow: column wrap; /* wrap items column wise */    justify-content: flex-start; /* items start top of container */    border: 1px solid black;    width: 500px;    height: 500px;  }  #innerleft {    align-self: flex-start; /* equivalent float: left of code */    border: 1px solid red;  }  #innermiddle {    align-self: center; /* equivalent margin: auto */    border: 1px solid red;  }  #innerright {    align-self: flex-end; /* equivalent float: right */    border: 1px solid red;  }

<div id='outer'>    <div id='innerleft'>left</div>    <div id='innermiddle'>middle</div>    <div id='innerright'>right</div>  </div>