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](https://i.stack.imgur.com/aAGEE.png)

[second image](https://i.stack.imgur.com/RuLuH.png)