[HTML] How to arrange multiple elements in the same row

Problem
In this dialog, I hope the drop down list should be at the right side of the radio button, not in the new line.




The code snippet looks like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="row"> <div class="col-sm-12"> <div class="form-group" style="display:inline"> <label>即時應用系統異常追蹤整合</label> <div> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯 <span style="padding-left:20px"> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯 </span> <span style="padding-left:5px"> <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'" > <option value="" selected> 請選擇 </option> <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option> </select> </span> </div> </div> </div> </div>

How-to
You can use CSS to fulfill this requirement:

display:inline-block

Just add display:inline-block; to this drop down list's style, the updated code snippet is as bellowing:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="row"> <div class="col-sm-12"> <div class="form-group" style="display:inline"> <label>即時應用系統異常追蹤整合</label> <div> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='0'" (click)="newProject.sentryOption='0'">立即建立專案關聯 <span style="padding-left:20px"> <input type="radio" name="sentryOption" [checked]="newProject.sentryOption==='1'" (click)="newProject.sentryOption='1'">選擇既有的關聯 </span> <span style="padding-left:5px"> <select class="form-control" name="sentryProjectId" [(ngModel)]="newProject.sentryProjectId" [style.width.px]="50" *ngIf="newProject.sentryOption==='1'" style="display:inline-block;"> <option value="" selected> 請選擇 </option> <option *ngFor="let sp of sentryProjects" [ngValue]="sp.slug">{{sp.slug}}</option> </select> </span> </div> </div> </div> </div>

See...the radio buttons and drop down list are in the same row.
Reference
[1] https://www.quora.com/I-want-to-put-two-divs-in-HTML-in-the-same-line-but-one-always-comes-under-the-other-one-What-should-I-do
[2] http://crunchify.com/basic-html-how-do-you-create-blank-space-in-html/