Position textfield as 'attached' to the other field - html

Question

I have the following layout:
When the screen size is changed I want the text field to stay always 'attached' to the last radio button having 1em distance between them. The problem is that the radio button group is one div and the text field is another. Is there a way of specifying css rules on the text field only to achieve such positioning? If not, what could be done otherwise? I am using semantic-ui-react and due to the nature of the project structure can only position the radio button group and the textfield in two different Form.Groups'.

Answer 1

You can use display the flex property for this design. It will always align at the bottom from the last radio button. You just need to add to lines in CSS. Here is the pen: https://codepen.io/Mak0619/pen/bPYXyg
HTML:
<div class="radio-button-grop">
<div class="bd-example">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="">
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="">
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
<div class="text-field">
<input type="text">
</div>
</div>
CSS:
.radio-button-grop{
display: flex;
align-items: flex-end;
}
.text-field{
margin-left: 1em;
}