drop float div на следующую строку, если она слишком широкая

Question

У меня есть поле с информацией о значении ключа. Если поле значения слишком велико и соответствует шкале клавиш, тогда поле значений должно выпадать под полем ключа

https://jsfiddle.net/nwpems8w/

Значение на третьей строке должно опускаться под ключом? Как это сделать?

.box { 
 
    background: #aaa; 
 
    width: 150px; 
 
} 
 
.box_prop { 
 
    clear: both; 
 
    text-align: right; 
 
} 
 
.box_key { 
 
    float: left; 
 
} 
 
.box_value { 
 
    font-weight: bold; 
 
}

<div class="box"> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key</div> 
 
    <div class="box_value">value</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key long</div> 
 
    <div class="box_value">value long</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key giga long</div> 
 
    <div class="box_value">value giga long</div> 
 
    </div> 
 
</div>

Answer 1

Использование float: right на .box-value и установить лежал на родителя.

.box_value { 
    float: right; 
} 

.box { 
 
    background:#aaa; 
 
    width:150px; 
 
} 
 

 
.box_prop { 
 
    overflow: hidden; 
 
} 
 

 
.box_key { 
 
    float:left; 
 
} 
 

 
.box_value { 
 
    font-weight:bold; 
 
    text-align: right; 
 
    float: right; 
 
}

<div class="box"> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key</div> 
 
    <div class="box_value">value</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key long</div> 
 
    <div class="box_value">value long</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key giga long</div> 
 
    <div class="box_value">value giga long value giga longvalue giga long</div> 
 
    </div> 
 
</div>

Answer 2

Вы можете сделать это с помощью Flexbox, просто использовать flex-wrap: wrap на .box_prop

.box { 
 
    background: #aaa; 
 
    width: 150px; 
 
} 
 
.box_prop { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.box_value { 
 
    font-weight: bold; 
 
} 
 
.box_value { 
 
    margin-left: auto; 
 
}

<div class="box"> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key</div> 
 
    <div class="box_value">value</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key long</div> 
 
    <div class="box_value">value long</div> 
 
    </div> 
 
    <div class="box_prop"> 
 
    <div class="box_key">key giga long</div> 
 
    <div class="box_value">value giga long</div> 
 
    </div> 
 
</div>