space between my input bars, it just jumbos them all together which is something i dont want

Question

<div class="row" style="margin-bottom: 0.1cm">
                        <div class="col-xs-4">
                            Fuel temp probe cap:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="temp_prob" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Canister:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="purge_vol" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Fuel Tank:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="battery_volt" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Manufacture:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="battery_cap" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Manufacture:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="rec_energy" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Part Number:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="soc_min" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Material:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="num_of_cycles" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            SOC min:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="cop_file" style="height: 20px; width: 100px; margin-left: -25px" disabled="disabled">
                        </div>
                    </div>
                    </div>

Obv I have searched stack overflow, i tried margin bottom and other tips previously given. I guess whoever the previous intern was did write this properly.

Every time i try one of those methods, what ends up happening is that the parameters get messed up. See image below. enter image description here

Answer 1

I guess the column (for label) contents get overflowing/wrapped to the next line which inserts the space between input rows, the solution for this will be to increase the label column size, working example below!

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="row" >
      <div class="col-3">
          Fuel temp probe cap:
      </div>
      <div class="col-3">
          <input type="text" id="temp_prob" />
      </div>
      <div class="col-3">
          Canister:
      </div>
      <div class="col-3">
          <input type="text" id="purge_vol" />
      </div>
      <div class="col-3">
          Fuel Tank:
      </div>
      <div class="col-3">
          <input type="text" id="battery_volt" />
      </div>
      <div class="col-3">
          Manufacture:
      </div>
      <div class="col-3">
          <input type="text" id="battery_cap" />
      </div>
      <div class="col-3">
          Manufacture:
      </div>
      <div class="col-3">
          <input type="text" id="rec_energy" />
      </div>
      <div class="col-3">
          Part Number:
      </div>
      <div class="col-3">
          <input type="text" id="soc_min" />
      </div>
      <div class="col-3">
          Material:
      </div>
      <div class="col-3">
          <input type="text" id="num_of_cycles" />
      </div>
      <div class="col-3">
          SOC min:
      </div>
      <div class="col-3">
          <input type="text" id="cop_file" />
      </div>
    </div>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

stackblitz