Contact form with textarea next to inputs

Question

I want to put the contact form with the inputs on the left and the textarea on the right side as in the image below, I can do the expected result with the float:left but so my layout ends up breaking.

How to achieve the expected result without the float?

Follow the code I used:

.contact{
  float: left;
  width: 49.5%;
}

input, textarea{
  border: 1px solid lightblue;
  width: 100%;
}

textarea{
  height: 65px;
  resize: none;
}

.left{
  margin-right: .5%;
}

.right{
  margin-left: .5%;
}

  <div class="contact left">
    <input type="text" name="nome" autocomplete="name" placeholder="Nome" required>
    <input type="text" name="empresa" autocomplete="organization" placeholder="Empresa">
    <input type="text" name="telefone" autocomplete="tel-national" placeholder="Telefone" required>
  </div>
  <div class="contact right">
    <textarea name="mensagem" placeholder="Mensagem" required></textarea>   </div>

Answer 1

Makes with Flexbox that by default already puts an element next to each other.

You won’t even notice the difference. looks like you’re still with float, but I just had to put all the content inside a div and put the display:flex OBS: placed box-sizing:border-box for the value of the borders do not add up and you get an unwanted horizontal scrollbar on the page

See how the result turned out.

* {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.forme {
  display: flex;
}
.contact{
  width: 49.5%;
}
input, textarea{
  border: 1px solid lightblue;
  width: 100%;
}
textarea{
  height: 65px;
  resize: none;
}
.left{
  margin-right: .5%;
}
.right{
  margin-left: .5%;
}

<div class="forme">
  <div class="contact left">
    <input type="text" name="nome" autocomplete="name" placeholder="Nome" required>
    <input type="text" name="empresa" autocomplete="organization" placeholder="Empresa">
    <input type="text" name="telefone" autocomplete="tel-national" placeholder="Telefone" required>
  </div>
  <div class="contact right">
    <textarea name="mensagem" placeholder="Mensagem" required></textarea>
  </div>
</div>