Put form side by side

Question

I am new to front end development and now I am trying to put the forms in the following form side by side rather than showing in the separate row. Here is my code:

        $templateCache.put('myProfile.html', 
            '<div ng-cloak>'+
            '<div class="modal-header">'+
                '<h3 class="modal-title">My Profile</h3>'+
            '</div>'+
            '<div class="modal-body">'+
            '<div class="form-group">'+
                '<label>Title</label>'+
                '<input type="text" id="first_name" name="first_name" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
                '<label>First Name</label>'+
                '<input type="text" id="first_name" name="first_name" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
                '<label>Last Name</label>'+
                '<input type="text" id="last_name" name="last_anme" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
                '<label>Test</label>'+
                '<input type="text" id="address" name="address" class="form-control" required/>'+
            '</div>'+
            '<div class="form-group">'+
            '<label>Other</label>'+
            '<input type="text" id="other" name="other" class="form-control" required/>'+
        '</div>'+
            '<div class="form-group">'+
                '<label>Date Format</label>'+
                '<select class="form-control-filter" ng-init="tempDateFormat = dateFormat"'+
                    ' ng-model=\"tempDateFormat\" style="width:100%;">'+
                    '<option value="DD/MM/YYYY">DD/MM/YYYY</option>'+
                    '<option value="MM/DD/YYYY">MM/DD/YYYY</option>'+
                    '<option value="DD-MM-YYYY">DD-MM-YYYY</option>'+
                    '<option value="MM-DD-YYYY">MM-DD-YYYY</option>'+
                '</select>'+
            '</div>'+
            '<div class="modal-footer" style="padding:5px;">'+
                '<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+
                'ng-click="$close(tempDateFormat)">Save</button>'+
                '<button class="btn btn-primary" type="button" style="height:30px; padding:4px 12px;" '+
                'ng-click="$close(tempDateFormat)">Cancel</button>'+
            '</div>'+
            '</div>'
    );

The output shows like the following:

However, I wish this window to be expanded and the form first name and last name should be shown side by side. I did some research on this site but seems not working in my case.

Thanks in advance.

Answer 1

Put first name and last name html in the same form group and give it the class of form-inline. Like so:

<div class="form-group form-inline">
  <label>First Name</label>
  <input type="text" id="first_name" name="first_name" class="form-control" required/>
  <label>Last Name</label>
  <input type="text" id="last_name" name="last_name" class="form-control" required/>
</div>

If you want them to be side by side at mobile widths you will have to override some css just add:

.form-inline .form-control{
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

You may have to do some custom css to make them look right if you do this at mobile widths though because I think they look kinda silly side by side in small screens