CSS Regions

HTML

<div class="container">
    <p id="content">Once upon a time, a mouse, a bird, and a sausage, entered into partnership and set up house together. For a long time all went well; they lived in great comfort, and prospered so far as to be able to add considerably to their stores. The bird's duty was to fly daily into the wood and bring in fuel; the mouse fetched the water, and the sausage saw to the cooking.</p>
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-3"></div>
</div>

CSS

@-webkit-keyframes resize {
    from { width: 100%; }
    to { width: 50%; }
}

html, body { margin: 0; padding: 0; }

.container {
  height:300px;
    background-color: #EBEBEB;
    margin: 0 auto;
    max-width: 800px;
    padding: 20px 0;
    width: 100%;
}

.container:hover { -webkit-animation: resize 3s alternate infinite; }

#content {
    -webkit-flow: 'foo';
    -webkit-flow-into: foo;
    color: #666;
    font: normal 16px/1.25 'Helvetica Neue', sans-serif;
}

div[class^='content'] {
    background-color: white;
    border: 1px solid red;
    -webkit-box-sizing: border-box;
    content: -webkit-from-flow('foo');
    -webkit-flow-from: foo;
    margin: 20px 5%;
    height: 82px;
    overflow: hidden;
    padding: 10px;
    width: 90%;
}

div.content-2 {
    margin-left: 50%;
    width: 45%;
}

div.content-3 {
    margin-right: 40%;
    width: 55%;
}