Div Выравнивание и форма

Question

Что бы быть лучшим способом, чтобы выровнять эти две колонки - .responseNum & .responseText:

Также столбец Num имеет фон -> Могу ли я сделать эту форму с CSS3, как я не могу получить правильность пропорций изображения?

HTML:

<div class="textMessageResponse"> 
    <div class="responseNum"> 
     <span class="number">1</span> 
    </div> 
    <div class="responseText"> 
     <p>Not bad morbi no bad luke crying twitter le me sit superhero cellphone. Strangers silent hill party problem? Loki cereal guy gentlemen monocle high school lose trolololo men true story. On freddie mercury asian le girlfriend happy facepalm blizzard bart. Charlie Sheen bacon search pokeman unsave i see what you did there vegan cookie monster humor final week.</p> 
    </div> 
</div> 

CSS:

.textMessageResponse{ 
    height:60px; 
    background-color:#fff; 
    margin:10px; 
} 
.textMessageResponse .responseNum .responseText{ 
    float:left; 
    display:inline-block; 
} 

.textMessageResponse .responseNum{ 
    width:35px; 
    height:35px; 
} 

.textMessageResponse .responseNum .number{ 
    background:url('../images/numBG.png') no-repeat; 
    width:25px; 
    height:25px; 
    color:#fff; 
    text-align:center; 
    font-weight:bold; 
} 

Answer 1

в CSS выберите дисплей-вариант для родителей ваших .responseNum & классов .responseText. Таким образом, введите css под родительским классом «textMessageResponse» либо: display: inline; или отображение: встроенный блок; для горизонтального выравнивания ваших div или дисплей: блок; для вертикального выравнивания ваших div.

Answer 2

Изменение CSS, как это,

.textMessageResponse{ 
    height:60px; 
    background-color:#fff; 
    margin:10px; 
} 
.textMessageResponse .responseNum, .textMessageResponse .responseText{/*change*/ 
    float:left; 
} 

.textMessageResponse .responseText{ 
    width:300px;/*Add this*/ 
} 

.textMessageResponse .responseNum{ 
    width:35px; 
    height:35px; 
} 

.textMessageResponse .responseNum .number{ 
    background:url('http://jzm.co.nz/clients/dev/_assets/images/numBG.png') no-repeat; 
    width:25px; 
    height:25px; 
    color:#fff; 
    text-align:center; 
    font-weight:bold; 
    display:block; /*change*/ 
}​​ 

Я надеюсь, что это поможет.