tarun14110 tarun14110 - 5 months ago 17
HTML Question

How to put labels among themselves at small screen size

<div style="margin-top:20px;">
<label class="bold-label">Recommended: </label>
<label class="bold-label" id="rec">20</label>
<label class="bold-label pull-right" id="resp">80</label>
<label class="bold-label pull-right">Response: </label>
</div>


this looks fine on big screen (i.e Recommend:20 on left and Response:80 on right ) but as screen goes small it shatters. I want to display Recommended and Response on different lines if screen goes small to fit them.

Answer

I assume you want to have the right label under the left label when the screen size provides not enough space to render them in one line.

To achieve that wrap your labels in a div with the attribute display: inline-block this will render the labels in one line and if it's enough space they are among themselves. To align the label right use float: right.

The snippet below demonstrates the result

.inline-block {
  display: inline-block;
}

.right {
  float: right;
}
<div>
  <div class="inline-block">
    <label>Recommended: </label>
    <label id="rec">20</label>
  </div>
  <div class="right inline-block">
    <label id="resp">Response: </label>
    <label>80</label>
  </div>
</div>

Comments