How to create three inputs with the same line?

Question

HTML

<div id="main-container">
    <form id="register-form" action="">
      
      <div class="half-box">
          <input type="text" name="cc" id="cc" placeholder="Numero do cartao">
      </div>
      
      <div class="half-box1">
         <input type="text" name="mes" id="mes" placeholder="MM">
      </div>
      
      <div class="half-box2">
         <input type="text" name="ano" id="ano" placeholder="AAAA">
      </div>
      
     </div>
  </form>
    </div> 

CSS

  input, label {
  display: block;
  outline: none;
  width: 100%;
  border: none;
}

#main-container {
  width: 1100px;
  margin-left: 120px;
  padding: 25px;
  margin-bottom: 40px;
  margin-top: 40px;
}

form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.half-box {
  flex: 1 1 20%;
  position: relative;
  margin-right:800px;
  float:left;
}

.half-box1 {
  flex: 1 1 0%;
  position: relative;
  padding-right:250px;
}

.half-box2 {
  flex: 1 1 20%;
  position: relative;
}

.spacing {
  margin-right: 15.0%;
}

label {
  font-weight: bold;
  font-size: .8rem;
}

input {
  border-bottom: 2px solid #898989;
  padding: 17px;
  font-size: 18px;
  margin-bottom: 40px;
}

I can’t solve input code on the same line and separately to make it equal to the image below. You can help me, thank you.

Answer 1

You can separate the card number and expiry date into two Ivs, leave the main div with flex display and use the column-gap property to separate. Check on the Codepen

#register-form{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 100px;
}

#register-form p{
  font-weight: bold;
}

.half-box2 input{
  width: 60px;
}

<div id="main-container">
  <form id="register-form" action="">
    <div class="half-box1">
      <p>Número do cartão:</p>
      <input type="text" name="cc" id="cc" placeholder="Numero do cartao" />
    </div>

    <div class="half-box2">
      <p>Data de validade:</p>
      <div>
        <input type="text" name="ano" id="ano" placeholder="AAAA" />
        <input type="text" name="mes" id="mes" placeholder="MM" />
      </div>
    </div>
  </form>
</div>

Answer 2

You can use Bootstrap, it’s a great framework and helps a lot in these cases.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/css/bootstrap.min.css" integrity="sha512-thoh2veB35ojlAhyYZC0eaztTAUhxLvSZlWrNtlV01njqs/UdY3421Jg7lX0Gq9SRdGVQeL8xeBp9x1IPyL1wQ==" crossorigin="anonymous" />

<div class="input-group">
  <span class="input-group-text">Dados do Cartão</span>
  <input type="text" class="form-control" name="cc" id="cc" placeholder="Numero do cartao">
  <input type="text" class="form-control" name="mes" id="mes" placeholder="MM">
  <input type="text" class="form-control" name="ano" id="ano" placeholder="AAAA">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/js/bootstrap.min.js" integrity="sha512-ZvbjbJnytX9Sa03/AcbP/nh9K95tar4R0IAxTS2gh2ChiInefr1r7EpnVClpTWUEN7VarvEsH3quvkY1h0dAFg==" crossorigin="anonymous"></script>

DEMO: https://codepen.io/pen/