Is there a way to align the asterisk symbol with the text and adjust the positioning of the Yes and No elements as depicted in the image?
https://i.sstatic.net/mCsUG.png
Check out this fiddle: https://jsfiddle.net/07bd0hda/ and snippet below:
<div class="dependents-covered-elsewhere">
<div class="dependents-covered-elsewhere-asterisk">*</div>
<label data-bind="text: i18n('dependents.coveredElsewhere')">Is the dependent covered elsewhere?</label>
<input type="radio" name="coveredElsewhere" value="1" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() && emprel_id && vm.home.action() == 'life-events')" disabled="">
<div data-bind="visible: field.isModified() && !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
<label>
<!-- ko i18n:'yes' -->Yes
<!-- /ko -->
</label>
<input type="radio" name="coveredElsewhere" value="0" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() && emprel_id && vm.home.action() == 'life-events')" disabled="">
<div data-bind="visible: field.isModified() && !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
<label>
<!-- ko i18n:'no' -->No
<!-- /ko -->
</label>
</div>The CSS styles I applied:
.dependents-covered-elsewhere {
max-width: 340px;
margin-left: 5px;
}