Form of contact with textarea next to the inputs

Question

Form of contact with textarea next to the inputs

Navigation

#1 by (1 votes)

2

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

Howtoachievetheexpectedresultwithoutfloat?

HereisthecodeIused:

.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>

html css

asked by anonymous 18.05.2018 / 20:03

1 answer

Save txt file in Matlab How to Take the "resizing" of a textarea?

score 1 · Accepted Answer

Do with Flexbox that by default already places one element next to the other.

You will not even notice the difference. I want to be able to add all of the contents of the div to the div, but I can not seem to figure out how to do this. with an unwanted horizontal scrollbar on the page

See how the result was.

* {
  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>