Can someone help me figure out why the code below is not working as expected?
I need the content of the 2nd option ("Log when error occurs and limit ...") to be enclosed in a yellow background.
.flex{
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
position: relative;
min-height: 0;
min-width: 0;
}
.flex--1{
flex: 1 1 auto;
}
.flex--0{
webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-moz-flex: 0;
flex: 0 0 auto;
}
input[type=radio].radio-button + label.radio-label {
padding-left: 20px;
height: 16px;
display: inline-block;
line-height: 16px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 14px;
vertical-align: middle;
cursor: pointer;
color: #666666;
}
li {
list-style-type: none;
display: list-item;
}<ul class="form__group">
<li>Send messages</li>
<li>
<input type="radio" name="log-options" class="radio-button" id="log-options-always" value="0">
<label for="log-options-always" class="radio-label ng-binding">always</label>
</li>
<li class="flex" style="background-color: yellow;">
<div class="flex--1">
<input type="radio" name="log-options" id="log-options-when-error" class="radio-button" value="1">
<label for="log-options-when-error" class="radio-label">Log when error occurs and limit log cache to...</label>
</div>
<div class="flex--0 width--lg disabled" ng-class="{disabled: data.Log.AutoLog !== '1'}">
<input type="text">
<span>KB</span>
</div>
</li>
</ul>Check out the JSFiddle link too.