https://codepen.io/joao-joao-joao/pen/jOzGjbe
.grid-contact-form {
display: grid;
margin-top: 48px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 12px;
}
My goal:
https://i.stack.imgur.com/mTCfc.jpg
>Solution :
Here you go…
Add the following to your CSS:
textarea {
display: block;
width: 100%;
}
See the snippet below.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
font-size: 100%;
background-color: #FF9900;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img,
video,
iframe,
embed {
max-width: 100%;
vertical-align: middle;
}
ul,
ol {
list-style: none;
}
input,
select,
textarea,
button {
font-size: inherit;
font-family: inherit;
}
a {
text-decoration: none;
}
textarea {
overflow: auto;
resize: vertical;
}
strong {
font-weight: normal;
}
.contact-form-title {
display: flex;
justify-content: center;
align-items: center;
width: 416px;
height: 105px;
box-shadow: 0 3px 0 1px #FF9900;
border-radius: 0 0 20px 20px;
}
.contact-form-title h2 {
font-weight: 700;
font-size: 1.75rem;
}
.form-field input,
.form-field textarea {
margin: 12px 0;
padding: 8px;
border: 1px solid #FF9900;
border-radius: 10px;
}
.contact-form-title-flex-container {
display: flex;
justify-content: center;
}
.contact-form-background {
background-color: #FFFFFF;
width: 730px;
height: 758px;
border-radius: 20px;
}
.contact-form-content {
padding: 0 48px;
font-size: 1.5rem;
}
.grid-contact-form {
display: grid;
margin-top: 48px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 12px;
}
label {
display: block;
font-weight: 700;
}
.message-grid-area {
grid-column: 1/3;
}
.textarea-grid-area {
height: 173px;
}
.position-checkbox {
display: flex;
justify-content: flex-start;
align-items: center;
padding-top: 24px;
font-size: 0.875rem;
gap: 8px;
}
.position-checkbox input {
width: 26px;
height: 26px;
}
.contact-form-button {
font-weight: bold;
color: #FFFFFF;
font-size: 1.5rem;
padding: 20px 40px;
background-color: #1A1A1A;
border: none;
border-radius: 10px;
cursor: pointer;
}
textarea {
display: block;
width: 100%;
}<body>
<section>
<div class="contact-form-background">
<div class="contact-form-title-flex-container">
<div class=contact-form-title>
<h2>Form title</h2>
</div>
</div>
<div class="contact-form-content">
<form class="grid-contact-form" action="envi@r.php" method="post">
<div class="form-field">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-field">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-field">
<label for="tel">WhatsApp</label>
<input type="tel" id="tel" name="tel" placeholder="(DDD)9XXYYXXYY">
</div>
<div class="form-field position-checkbox">
<input type="checkbox" id="whatsapp" name="whatsapp">
<label for="whatsapp">Checkbox WhatsApp</label>
</div>
<div class="form-field message-grid-area">
<label for="message">Message</label>
<textarea class="textarea-grid-area" name="message" id="message" rows="10" required></textarea>
</div>
<div class="button-grid-area">
<button class="contact-form-button">SEND</button>
</div>
</form>
</div>
</div>
</section>
</body>