Как разместить текст внутри HTML-div

Question

Привет У меня есть div с текстом «Основные сведения». Я хочу, чтобы Детали были ниже Basic.

Как я могу достичь этого.

Вот мой jsbin https://jsbin.com/dudine/edit?html,css,output

К сожалению, ребята, я впадина включать любой код здесь.

HTML

.textStyle { 
 
    color: white; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 90%; 
 
    white-space: normal; 
 
} 
 
.left-rounded-corner { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
    line-height: 16px; 
 
    box-sizing: border-box; 
 
    padding-top: 10px; 
 
    border-top-left-radius: 50px; 
 
    border-bottom-left-radius: 50px; 
 
} 
 
/*Allign elements in horizontally*/ 
 
.element_align_horizontally { 
 
    display: inline-block; 
 
}

<div id='statusContainer' class='scrollable'> 
 
    <div class="left-rounded-corner element_align_horizontally textStyle">Basic Details</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">two</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">three</div> 
 
    <div class="rectangle-shape element_align_horizontally textStyle">Four</div> 
 
    <div class="right-rounded-corner element_align_horizontally textStyle">Five</div> 
 
</div>

Спасибо за вашу помощь Рао

Answer 1

Вам нужно несколько вещей, чтобы это произошло без дополнительной разметки ...

.left-rounded-corner { 
    ... 
    line-height: 16px; 
    box-sizing: border-box; /* include padding and margin in height */ 
    padding-top: 10px; /* move text down a bit */ 
} 
.textStyle { 
    ... 
    font-size: 90%; /* something big enough to force wrap without extra markup */ 
    white-space: normal; /* allow wrapping */ 
}