How can I make input tag longer in grid system?

Question

I'm new to HTML and I am having a problem learning grid system in css. The first image is what I have made with simple label and input tags. However, I want to make the second input longer since it's where you type your email address. I tried including col-sm-12 but it doesn't seem to work. The ideal look would be the second image. Any help?

<div class="row">
<div class="form-group">
    <label  for="form-phone" class="col">phone #</label>
    <div class="col">
        <input type="text" class="form-control" id="form-phone" name="phone" placeholder="" autocomplete="off">
    </div>
</div>

<div class="form-group">
    <label  for="form-mail" class="col">E-mail</label>
    <div class="col sm-12">
        <input type="text" class="form-control" id="form-mail" name="mail" placeholder="" autocomplete="off">
    </div>
</div>

<div class="form-group">
    <label  for="form-money" class="col">money</label>
    <div class="col">
        <input type="text" class="form-control" id="form-money" name="money" placeholder="" autocomplete="off">
    </div>
</div>

first image

second image

Answer 1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="form-group col-3">
    <label for="form-phone" class="col">phone #</label>
    <div class="col">
      <input type="text" class="form-control" id="form-phone" name="phone" placeholder="" autocomplete="off">
    </div>
  </div>

  <div class="form-group col-4">
    <label for="form-mail" class="col">E-mail</label>
    <div class="col">
      <input type="text" class="form-control" id="form-mail" name="mail" placeholder="" autocomplete="off">
    </div>
  </div>

  <div class="form-group col-3">
    <label for="form-money" class="col">money</label>
    <div class="col">
      <input type="text" class="form-control" id="form-money" name="money" placeholder="" autocomplete="off">
    </div>
  </div>
</div>

just add col-6 in <div class="form-group col-6">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row ">
<div class="form-group">
    <label  for="form-phone" class="col">phone #</label>
    <div class="col">
        <input type="text" class="form-control" id="form-phone" name="phone" placeholder="" autocomplete="off">
    </div>
</div>

<div class="form-group col-6">
    <label  for="form-mail" class="col">E-mail</label>
    <div class="col">
        <input type="text" class="form-control" id="form-mail" name="mail" placeholder="" autocomplete="off">
    </div>
</div>

<div class="form-group">
    <label  for="form-money" class="col">money</label>
    <div class="col">
        <input type="text" class="form-control" id="form-money" name="money" placeholder="" autocomplete="off">
    </div>
</div>
</div>

Answer 2

Okay, so col-sm-12 is the part of a framework called Bootstrap. What you want to do in the grid system, is when you want to spread them, you can always use grid-template-columns where you specify how many columns do you want, and put width, or you can put automatic width over 1fr which takes 1 fraction of the screen. With your example, you can put 4 column, and you have 3 inputs, so you can put colspan on the email input I think, and that would make it larger than the other inputs. Anyways, on the bootstrap, which you mentioned with col-sm-12, 1 row has 12 spaces(call it that), if you want to put some larger than the other, you would go with 1 div being col-sm-3, the middle one would be col-sm-6, and the last one would be col-sm-3, which adds up to 12, if you understand. Feed free to ask in comments more.

.grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
#spread{
  grid-column: 2 / span 2;
}

<form action="" class="grid">
  <input type="text" name="" id="">
  <input type="text" name="" id="spread">
  <input type="text" name="" id="">
</form>

It looks something like this