在相对容器中垂直放置块级元素

Question

I am currently trying to achieve this effect:

and I have gotten very close, Here's what I have so far:

JSFIDDLE DEMO

CSS:

.block {
            margin-top: 1em;
            position: relative;
            overflow: auto;
            height: 100%;
            width: 100%;
            float: left;
        }
        .icon {
            background: #000000;
            display: inline-block;
            height: 50px;
            width: 112px;
        }
        .line {
            position: absolute;
            background: #000099;
            width: 100%;
            height: 1px;
            z-index: -1;
            top: 50%;
            left: 0;
            margin-left: -416px;
        }
        .text {
            /*background: #004746;*/
            display: inline-block;
            position: relative;
            vertical-align: middle;
            max-width: 400px;
            float: right;
            border-left: 1px solid #000099;
            padding-left: 1em;
        }
        .text:after {
            content:"";
            background: #000099;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 1em;
            height: 1px;
        }
        .text:before {
            content:"";
            background: #000099;
            position: absolute;
            top: 0;
            left: 0;
            width: 1em;
            height: 1px;
        }
        .text p {
            padding: 0 0 1em 0;
        }
        .text p:last-child {
            margin: 0;
        }

HTML:

<div class="block">
    <div class="icon"></div>
    <div class="line"></div>
    <div class="text">
        <p>Lorem ipsum dolor sit amet, pri eu liber utroque quaestio, ei dicta quaeque sed. Civibus omnesque concludaturque vim eu, ex his nostro quodsi, graecis commune posidonium mei ad. Nam facilis alienum fastidii te, te quando euripidis usu. Torquatos consetetur suscipiantur mel eu, duo cu impedit feugait.</p>

        <p>Vocibus urbanitas suscipiantur pro ut, cu nisl nobis nonumy mel. Posse omnes urbanitas usu in, nusquam invidunt ad sed, mucius recusabo has ea. Aliquip voluptua ius eu, ex vix justo mundi, indoctum scripserit mei cu. Te sit tantas albucius probatus.</p>
    </div>
</div>

My only problem is the box on the left ("icon"), needs to vertically align with the line that runs through. But the box can not be position absolute.

RULES:

1. Has to be responsive.
2. Needs to work from IE8 up.
3. Needs to account for the fact that the text on the right is dynamic and could grow or shrink.

Answer 1

add this code to your .icon class:

.icon {
   position: absolute;
   top: 50%;
   margin-top: -25px;
}