单选按钮旁边的文本不会成为垂直中心

Question

restaurentInfo.html

<div class="restaurent-container">
    <div class="restaurent-info">
        <label for "restaurent">Restaurent name </label>
        <select class="restaurent" name="restaurent-category">
    <option value="corporate">corporate</option>
    <option value="savings">Savings</option>
    <option value="personal">Personal</option>
    </select>
    </div>
    <div class="food-container">
        <input type="radio" name="radio" id="food" class="radio" />
        <label style="margin-left:10px;" for="food">Food</label>
        <input style="margin-left:10px;" type="radio" name="radio" id="food" class="radio" />
        <label style="margin-left:10px;" for="food">Drink</label>
    </div>

    <div style="margin-top:20px;" class="category-info">
        <label for "restaurent">Category </label>
        <select class="restaurent" name="restaurent-category">
    <option value="corporate">corporate</option>
    <option value="savings">Savings</option>
    <option value="personal">Personal</option>
    </select>
    </div>

    <div style="margin-top:20px;" class="item-info">
        <label for "restaurent">Category </label>
        <select class="restaurent" name="restaurent-category">
    <option value="corporate">corporate</option>
    <option value="savings">Savings</option>
    <option value="personal">Personal</option>
    </select>
    </div>
</div>

restaurentInfo.scss

.restaurent-container {
    width: 100vw;
    height: 100vh;
    margin: 30px 0 0 30px;
    .food-container {
        display: flex;
        flex-direction: row;
    }
}