как поместить текст внутри HTML div

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

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

Вот мой jsbin
https://jsbin.com/dudine/edit?html, css, выход

Извините ребята я dint включить любой код здесь.

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>

Спасибо за помощь
РАО

1 ответ

  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 */
    }