Bootstrap - выравнивание текстовых элементов столбца

Question

Я пытаюсь выровнять по правому 2 'h' элементам (т. Е. H1 и h3) внутри правого столбца Bootstrap.

<div class="col-xs-6">photo</div> 
<div class="col-xs-6 text-right"> 
<h1>Header</h1> 
<h3 style="width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</h3> 
</div> 

Проблема в том, что h3 с фиксированной шириной не выровнен по правому краю, а h1 - сниппет. См screen

Вот fiddle

После отладки я пришел, чтобы узнать, что этот вопрос должен был h1 свойство ширины. Но мне нужно, чтобы текст складывался. Это можно решить, вручную установив левое поле, но я уверен, что есть более элегантное решение.

Почему свойство width сохраняет текст от выравнивания и каково решение?

Answer 1

Попробуйте использовать следующий блок.

CSS:

h1, h3{ 
    display: inline-block; 
    padding-right: 20px; 
}