<form>
  <div class="form-row">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" name="firstName">
    </div>
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" name="lastName">
    </div>
  </div>
</form>

<style>
  .form-row {
    display: flex;
    gap: 16px; /* 设置字段间距 */
  }
  
  .form-group {
    flex: 1; /* 使两个字段等宽 */
  }
  
  .form-group label {
    display: block;
    margin-bottom: 4px;
  }
  
  .form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
</style>

<form class="form-grid">
  <div class="form-group">
    <label for="city">City</label>
    <input type="text" id="city" name="city">
  </div>
  <div class="form-group">
    <label for="state">State</label>
    <select id="state" name="state">
      <option value="">Select...</option>
      <option value="CA">California</option>
    </select>
  </div>
  <div class="form-group">
    <label for="zip">ZIP Code</label>
    <input type="text" id="zip" name="zip">
  </div>
</form>

<style>
  .form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 4px;
  }
  
  .form-group input,
  .form-group select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
</style>

@media (max-width: 600px) {
  .form-row, .form-grid {
    display: block;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}