Как выровнять два divs вправо, удерживая их влево слева

Question

Мне нужно поддерживать одинаковый выравнивание divs, но все они выравниваются вправо: У меня есть изображение: Как вы можете видеть «hello» и «helloooooo» выравниваются вправо, но я хочу, чтобы они выровнялись влево.

так это выглядит следующим образом:

HTML

<ul class="fu-form--job-edit-details mdl-list"> 
    <li class="mdl-list__item"> 
    <span class="mdl-list__item-primary-content"> 
     <span class="fu-form--job-edit-details--title">Hello:</span> 
     World 
    </span> 
    </li> 
    <li class="mdl-list__item"> 
    <span class="mdl-list__item-primary-content"> 
     <span class="fu-form--job-edit-details--title">Hello:</span> 
     World 
    </span> 
    </li> 
</ul> 

CSS:

.fu-form--job-edit-details { 
    .mdl-list__item { 
    color: $text-label-color; 
    padding: 0; 
    min-height: 35px; 
    } 

    .mdl-list__item-primary-content { 
    justify-content: flex-end; 
    } 

    .fu-form--job-edit-details--title { 
    font-weight: bold; 
    padding-right: 5px; 
    } 
} 

Answer 1

Это то, что вы хотите?

.fu-form--job-edit-details{ 
 
    float:right; 
 
    text-align: right; 
 
} 
 

 

 
.mdl-list__item { 
 
    color: #222; 
 
    padding: 0; 
 
    min-height: 35px; 
 
    list-style:none; 
 
    } 
 

 
    .mdl-list__item-primary-content { 
 
    /*justify-content: flex-end;*/ 
 
    width: 100%; 
 
    } 
 

 
    .fu-form--job-edit-details--title { 
 
    font-weight: bold; 
 
    padding-right: 5px; 
 
    float:left; 
 
    }

<ul class="fu-form--job-edit-details mdl-list"> 
 
    <li class="mdl-list__item"> 
 
    <span class="mdl-list__item-primary-content"> 
 
     <span class="fu-form--job-edit-details--title">Hello:</span> 
 
     World 
 
    </span> 
 
    </li> 
 
    <li class="mdl-list__item"> 
 
    <span class="mdl-list__item-primary-content"> 
 
     <span class="fu-form--job-edit-details--title">Hellooooooooooooooo:</span> 
 
     World 
 
    </span> 
 
    </li> 
 
</ul>