Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> .myForm { display: grid; grid-template-columns: auto 1fr 1fr; grid-auto-flow: row dense; grid-gap: .8em; background: #eee; padding: 1.2em; } .myForm > label { grid-column: 1; grid-row: auto; } .myForm > input, .myForm > button { grid-column: 2; grid-row: auto; padding: 1em; border: none; } .myForm textarea { min-height: calc(100% - 2em); width: 100%; border: none; } #comment-box { grid-column: 3; grid-row: span 3; } .myForm > button { grid-column: 2 / 4; } </style> <form class="myForm"> <label for="customer_name">Name </label> <input type="text" name="customer_name" id="customer_name" required> <label for="email_address">Email </label> <input type="email" name="email_address" id="email_address"> <label for="phone">Phone </label> <input type="tel" name="phone" id="phone"> <div id="comment-box"> <label for="comments">Comments</label> <textarea name="comments" id="comments" maxlength="500"></textarea> </div> <button>Submit</button> </form>
Preview