When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space.
This is the desired layout I want to achieve regardless of the number of labels present:
https://i.sstatic.net/I8LrK.png
.small-numeric-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}
.small-numeric-container label {
margin-right: 10px;
margin-top: 10px;
}
.numeric-small {
width: 85px;
}
.box {
display: inline-block;
margin-top: 10px;
justify-content: center;
}
.rating {
position: relative;
display: flex;
flex-direction: row-reverse;
border: 1px solid #ffffff;
box-sizing: border-box;
background: linear-gradient(to right, #ff0000, #20c997, #0f5132);
}
.rating input {
display: none;
}
.rating label {
display: flex;
cursor: pointer;
width: 45px;
height: 45px;
justify-content: center;
align-items: center;
transition: 0.5s;
background: #212529;
border-right: 1px solid #ffffff;
}
.h-separator {
width: 10px;
}
.rating input[type="radio"]:hover~label,
.rating input[type="radio"]:checked~label {
background: transparent;
color: #000000;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d514d50">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<div class="small-numeric-container">
<label>
<input class="form-control numeric-small" max="15" min="2"
name="0-scale" placeholder="Scale" type="number" value="10">
</label>
</div>
<span class="h-separator"></span>
<div class="box">
<div class="rating">
<input id="rating-label-10" name="rating" type="radio">
<label for="rating-label-10">10</label>
<input id="rating-label-9" name="rating" type="radio">
<label for="rating-label-9">9</label>
<input id="rating-label-8" name="rating" type="radio">
<label for="rating-label-8">8</label>
<input id="rating-label-7" name="rating" type="radio">
<label for="rating-label-7">7</label>
<input id="rating-label-6" name="rating" type="radio">
<label for="rating-label-6">6</label>
<input id="rating-label-5" name="rating" type="radio">
<label for="rating-label-5">5</label>
<input id="rating-label-4" name="rating" type="radio">
<label for="rating-label-4">4</label>
<input id="rating-label-3" name="rating" type="radio">
<label for="rating-label-3">3</label>
<input id="rating-label-2" name="rating" type="radio">
<label for="rating-label-2">2</label>
<input id="rating-label-1" name="rating" type="radio">
<label for="rating-label-1">1</label>
</div>
</div>
</div>