Вертикально выровнять несколько <p> относительно высоты изображения

Используйте CSS flexbox (возможно, хотите добавить префиксы поставщика для лучшей поддержки браузера):

.wrap {
    display: flex;
    align-items: center;
}
img {
    width:20%;
}

http://jsfiddle.net/teddyrised/LBUyS/4/

Вот один из способов сделать это, используя CSS-ячейки.

Для HTML:

<div class="wrap">
    <div class="img-panel">
        <img src="https://i.imgur.com/Yako69m.jpg" />
    </div>
    <div class="text">
        <p>line1</p>
        <p>line2</p>
    </div>
</div>

Оберните изображение в div подобно тому, что вы сделали для div.text который обертывает p элементы.

Примените следующий CSS:

.wrap {
    display: table;
    width: 80%; /* optional */
    margin: 0 auto; /* optional if you want to center wrapper */
}
.img-panel, .text {
    display: table-cell;
    border: 1px solid blue;
}
.img-panel {
    width: 20%;
    vertical-align: top;
}
.img-panel img {
    width: 100%;
    display: block;
}
.text {
    vertical-align: middle;
}
.text p {
    background-color: yellow;
}

Примените display: table к обертке, а затем display: table-cell для двух дочерних div.

Используйте свойство vertical-align: top чтобы установить изображение в начало его родительского элемента, а затем vertical-align: middle чтобы расположить абзацы до середины правого элемента table-cell.

Пока изображение более высокое, а затем содержимое вправо, вы получите макет, который вам нужен.

См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/uG8G2/

Используйте значение -ve для

 margin-top. 
margin-top: -12%;

Но вы также должны заботиться о медиа-запросе. Вместо % PX используйте %. Надеюсь, это исправит.