Как удалить пробел между двумя текстовыми полями

Question

Я хочу удалить пробелы между двумя текстовыми полями и выровнять их по центру.Код:

    <div class="form-row">
       <div class="col-3" id="fn1">
          <input type="text" class="form-control" placeholder="First name" 
          name="firstName">
       </div></br>
       <div class="col-3" id="ln1">
           <input type="text" class="form-control" placeholder="Last name" 
           name="lastName">
       </div>
     </div>
</div>

Я хочу удалить пробел между именем и фамилией.Спасибо заранее.

CSS Styling:

<style type="text/css">

p{
        text-align: center;
        font-size: 40px;
        font-family: initial;
        text-decoration: underline;
        font-style: italic;
    }

    .btn-outline-success{
        display: block; 
  margin: 0 auto;
    }

nav{
  float:right;
}

body{
  background-color: #F9F9FB;
}

.form-row > div{
      margin:0 auto;
      width:250px;

}

.col-3 > div
{
  margin:0 auto;
}

Answer 1

Вам нужно поместить оба поля ввода в один и тот же div / столбец и определить ширину как 50% (даже меньше, чем 47% для размещения любого отступа или поля)

<div class="form-row">
  <div class="col-3" id="fn1">
    <input type="text" class="form-control half-input" placeholder="First name" name="firstName">

    <input type="text" class="form-control half-input" placeholder="Last name" name="lastName">
  </div>
</div>

Обратите внимание, что оба поля находятся вто же самое div, и я добавил новый класс к этим двум: "половина ввода".Определение стиля:

.half-input {
  display: inline-block;
  width: 47%;
}

Вот рабочая JSFidlle