Showing two selection boxes side by side - html

Question

I have the following code which I wrote:
<div class="selectAorB" *ngIf="this.objects.length > 1">
<div>
<select (change)="this.AorB($event)">
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT" *ngIf="this.objects.length == 1">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
The css:
.selectAorB{
width: 50px;
margin-left: 370px;
margin-top: -41px;
border: 1px solid rgba(88, 109, 140, 0.5);
border-radius: 4px;
padding: 3px;
}
.selectAorB select{
display: block;
width: 50px;
background-image: url('../../../assets/icons/select_arrow.png');
background-repeat: no-repeat;
background-position: right center;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
overflow:hidden;
color: #1A3763;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: normal;
Opacity: 70%;
}
.selectNOT{
width: 50px;
margin-left: 370px;
margin-top: -41px;
border: 1px solid rgba(88, 109, 140, 0.5);
border-radius: 4px;
padding: 3px;
}
.selectNOT select{
display: block;
width: 50px;
background-image: url('../../../assets/icons/select_arrow.png');
background-repeat: no-repeat;
background-position: right center;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
overflow:hidden;
color: #1A3763;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: normal;
Opacity: 70%;
}
Currently, the code adds the selection boxes. If there are multi objects than it will show a box which user can choose None, A or B.
If there is only one object it will add a box which allows to use None or NOT.
The feature I'm trying to implement is to add the second box (None/NOT) beside the first box, in cases there are more than one object, so the HTML should look like:
<div class="selectAorB" *ngIf="this.objects.length > 1">
<div class="selectNOT" *ngIf="this.status == 'NOT'">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
<br>
</div>
<div>
<select (change)="this.AorB($event)">
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT" *ngIf="this.objects.length == 1">
<div>
<select (change)="this.notChange($event)">
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>
But the problem I have is to change the CSS. Every property that I tried to change lead to strange behavior (boxes not in their places). I'm not sure which change I should make so it could work as expected (two boxes one by one). Hoping to hear some guidelines about what to do.

Answer 1

I am not sure that you actually need to have those divs in the first place, but perhaps you need those for something else you intend to do that is out of the context of this question. Also, a lot of your CSS seems unnecessary without seeing the rest of your source, such as the negative margins. So for the sake of simplicity I will ignore all of that.
To get both of the divs containing your selects onto the same line, simple float them with float: left such as in the following example:
.inline {
float: left;
margin-right: 5px;
}
<div class="selectAorB inline">
<div>
<select>
<option value="None" >None</option>
<option value="A" >A</option>
<option value="B" >B</option>
</select>
</div>
</div>
<div class="selectNOT inline">
<div>
<select>
<option value="None" >None</option>
<option value="NOT" >NOT</option>
</select>
</div>
</div>