Как настроить выравнивание меток по левому краю на элементах макета формы в vuejs

Question

Я новичок в vuejs, я делаю веб-приложение для моего отца и брата, чтобы помочь им в клинике, я написал форму ниже в одном компоненте файла: но выравнивая метки по левому верху полей вводастановится проблемой

<template>
    <div>

        <div class="form-style-2">
            <div class="form-style-2-heading">Attend In Patients</div>
            <div class="ui form">
            <label for="Patient Name:"><span>Patient Name:<span class="required">*</span>
            </span><input  type="text" v-model="patientName"></input></label>
            </br>
            <label>Attend Type</label>
            <select>
                <option v-model="attendType" :value="n" v-for="n in ['Please select', 'Appointment', 'Walk-in']">{{n}}</option>
            </select>
            </br>
            <label for="age"><span>Age <span class="required">*</span></span>
            <select>
                <option v-model="age" :value="n" v-for="n in 121">{{n}}</option>
            </select></label>
            <label for="gender"><span>Gender<span class="required">*</span></span>
            <label for="male">
                <input type="radio"
                       id="male"
                       value="Male"
                       v-model="gender"> Male
            </label>
            <label for="female">
                <input type="radio"
                       id="female"
                       value="Female"
                       v-model="gender"> Female
            </label>
            </label>
            <label><span>Department <span class="required">*</span></span>
                <select>
                    <option v-model="department" :value="n" v-for="n in ['Please select', 'Medicene', 'Dental']">{{n}}</option>
                </select>
            </label>
            </br>

            <label for="Mobilephone"><span>Mobile Number<span class="required">*</span></span>
            <input  type="text" v-model="mobileNumber"></input></label>
            </br>
            <label><span>Town/City <span class="required">*</span></span>
            <input  type="text" v-model="townCity"></input></label>
            </br>
            <label> Address
                <textarea-autosize
                        placeholder="Type full address here..."
                        ref="someName"
                        v-model="someValue"
                        :min-height="30"
                        :max-height="350"
                        @blur.native="onBlurTextarea"
                ></textarea-autosize>
            </label>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    .input {
        position: relative;
        margin: $ui-padding 0 ($ui-padding * 2);
        text-align: center;
        font-size: $ui-font-size;
    @include mq('desk') {
        font-size: 14px;
    }

    .form-style-2{
        max-width: 500px;
        padding: 20px 12px 10px 20px;
        font: 13px Arial, Helvetica, sans-serif;
        margin: 0 auto;
    }
    .form-style-2-heading{
        font-weight: bold;
        font-style: italic;
        border-bottom: 2px solid #000;
        margin-bottom: 20px;
        font-size: 15px;
        padding-bottom: 3px;
    }
    .form-style-2 label{
        display: block;
        margin: 0px 0px 15px 0px;
    }
    .form-style-2 label > span{
        width: 100px;
        font-weight: bold;
        float: left;
        padding-top: 8px;
        padding-right: 5px;
    }
    .form-style-2 span.required{
        color:red;
    }
    .form-style-2 input.input-field{
        width: 48%;
    }

    .form-style-2 input.input-field,
    .form-style-2 .textarea-field{
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        border: 1px solid #C2C2C2;
        box-shadow: 1px 1px 4px #EBEBEB;
        -moz-box-shadow: 1px 1px 4px #EBEBEB;
        -webkit-box-shadow: 1px 1px 4px #EBEBEB;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        padding: 7px;
        outline: none;
    }
    .form-style-2 .input-field:focus,
    .form-style-2 .textarea-field:focus{
        border: 1px solid #0C0;
    }
    .form-style-2 .textarea-field{
        height:100px;
        width: 55%;
    }
    .form-style-2 input[type=submit],
    .form-style-2 input[type=button]{
        border: none;
        padding: 8px 15px 8px 15px;
        background: #4CAF50;
        color: #fff;
        box-shadow: 1px 1px 4px #DADADA;
        -moz-box-shadow: 1px 1px 4px #DADADA;
        -webkit-box-shadow: 1px 1px 4px #DADADA;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    }
    .form-style-2 input[type=submit]:hover,
    .form-style-2 input[type=button]:hover{
        background: #EA7B00;
        color: #fff;
    }
    }
</style>

с вышеприведенным кодом, который он рендерит так: , но мне нужно что-то вроде того, что показано в этом jsfiddle: https://jsfiddle.net/uv21fc5o/1/Мне также нужна помощь в выравнивании возраста и пола на одном уровне, а не в отдельных строках!и Как я могу сделать так, чтобы все компоненты формы оставались за панелью навигации, которая является отдельным компонентом.Любая помощь будет принята с благодарностью!