Displaying HTML elements in same row - html

Question

I am looking to achieve options as
But with current code, am getting it as below:
How to get options Yes and No next to each other
Below is my code:
For HTML
<div class="mycustom-radios">
<div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
<input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType"/>
<label class="mycustom-label mycustom-radios__label" for="e_employeeType">
<p>{{employeeType}}</p>
</label>
</div>
</div>
For component.ts
selectedemployeeType: string;
employeeTypes: string[] = ['Yes', 'No'];

Answer 1

#Patty! Try using the display:flex CSS property, like this:
<div style="display:flex">
<div>div block 1</div>
<div>div block 2</div>
</div>

Answer 2

You need to apply the CSS styles like so.
// use this styling
div{
display:flex;
align-items:center;
}
input{
margin-right:5px;
}
input:last-child{
margin-right:0px;
}
<div>
<!-- nest your angular controls here -->
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>

Answer 3

Change p to span and apply display:inline as in below example. In the example I have added 2 divs to mimic *ngFor="let employeeType of employeeTypes"
.mycustom-radios__item {
display: inline-flex;
}
<div class="mycustom-radios">
<div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
<input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
<label class="mycustom-label mycustom-radios__label" for="e_employeeType">
<span>No</span>
</label>
</div>
<div class="mycustom-radios__item" *ngFor="let employeeType of employeeTypes">
<input class="mycustom-radios__input" id="e_employeetype" name="what-type-of-employee" type="radio" [value]="employeeType" [(ngModel)]="selectedemployeeType" />
<label class="mycustom-label mycustom-radios__label" for="e_employeeType">
<span>Yes</span>
</label>
</div>
</div>

Answer 4

This will do the trick:
.mycustom-radios {
display: flex;
flex-direction: row;
}
Or:
You can change display of your elements to inline-block like this:
.mycustom-radios__item {
display: inline-block;
}
If you use the flex display, make sure to add flex-wrap for smaller screens (like phones for instance):
.mycustom-radios {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}