Bootstrap表单-无法使标签和输入内联

Question

我正在做一个个人项目，我需要对当前表单进行一些更改，但到目前为止还无法正常工作。

我需要标签和输入为内联。这是screenshot表单的外观。

这是我当前的代码：

.personal_details {
    max-width: 503px;
    float: none;
    margin: 0 auto;
    padding: 40px;
    border-radius: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="personal_details">
  <form class="personal_details">
    <div class="form-group">
      <label for="firstName">First name</label>
      <input type="text" class="form-control" id="inputFirstName" />
    </div>
    <div class="form-group">
      <label for="lastName">Last name</label>
      <input type="text" class="form-control" id="inputLastName" />
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input type="text" class="form-control" id="inputEmail" />
    </div>

    <div class="form-group">
      <label for="phone_nummber">Account type</label>
      <select class="form-control" name="profile_type">
        <option value="Basic" selected>Freelancer</option>
        <option value="Company">Employer</option>
      </select>
    </div>
    <button class="btn btn-primary mt-4 px-5" type="submit">EDIT</button>
  </form> <!-- Form ends here -->
</div>