'How do I align Input HTML tag and Text Area in HTML and CSS (Styling a contact page)

I want to copy this style of contact page. I can't get my code to align like that this is my code: I am struggling with this. Please help Sample Contact Page Below is my code:

        <table width="400px" >
            
            <tr>
                <td  >
<span>Name</span>
<input type="text" name="name" id="name">

<div  >
    <span>Email</span>
    <input type="email" name="email" id="email">
</div>

                </td>
               
                <td class="TextArea" >
<textarea name="description" id="description" cols="30" rows="10"></textarea>
                </td>
            </tr>

        </table>

Here is the CSS

.TextArea {
    
    padding-top: 120px;
    padding-left: 100px;
}
htmlcss


Solution 1:[1]

You can use CSS for the layout of your page. Flexbox and Css grid are very useful for this. You can also inspect the code of the page you are trying to copy.

Here is an example of what you can do to approach the style of the model page.

HTML:

  <body>
    <form>
      <input type="text" placeholder="Your name" />
      <input type="email" placeholder="Your email" />
      <input type="text" placeholder="Your phone" />
      <textarea rows="4" cols="50" placeholder="Your message*"></textarea>
      <input type="submit" value="SEND MESSAGE" />
    </form>
  </body>

CSS:

html,
body {
  margin: 0;
  background-color: #222;
  width: 100%;
  height: 100%;
  /*Used to center the form*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-auto-flow: column;
}
textarea {
  grid-area: 1 / 2 / 4 / 3;
  padding: 10px;
}

input {
  padding: 10px;
}
input[type="submit"] {
  grid-area: 4 / 1 / 5 / 3;
  background-color: darkred;
  color: white;

  font-size: 1.1em;
  font-weight: 600;
  border-radius: 5px;
  border: none;
}

Result:

Result preview

Solution 2:[2]

Maybe something like this??

.getintouch {
    display:grid;
    grid-template-columns: auto auto;
    grid-gap:1rem;
    justify-content:center;
    }
<div class="getintouch">
<div>
    <label>Name</label><br>
    <input type="text" name="name" id="name"><br><br>

    <label>Email</label><br>
    <input type="email" name="email" id="email"><br><br>
    
    <label>Phone</label><br>
    <input type="email" name="email" id="email">
</div>
<div>
<textarea name="description" id="description" cols="30" rows="10"></textarea>
</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fred
Solution 2 Crystal

Related Questions