<section id="contact" class="contact">
            <h2>Contact Me</h2>
            <form action="#">
                <div class="form-container">
                    <div class="field">
                        <label>Name: </label>
                        <input type="text" placeholder="Name"></input>
                    </div>
                    <div class="field">
                        <label>Phone Number: </label>
                        <input type="tel" placeholder="Phone Number"></input>
                    </div>
                    <div class="field w-100">
                        <label>Email: </label>
                        <input type="mail" placeholder="Email"></input>
                    </div>
                    <div class="field w-100">
                        <label>Message: </label>
                        <textarea cols="30" rows="3"></textarea>
                    </div>
                </div>
                <div class="submit-form">
                    <input type="submit" class="button" value="send" />
                </div>
            </form>
        </section>
form {
    background-color: var(--grey);
    padding: 2rem;
    border-radius: 1rem;
}

.field {
    display: flex;
    margin-bottom: 1rem;
}

.field label {
    flex: 0 0 90px;
    color: var(--white);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="mail"],
.field textarea {
    flex: 1;
}

.w-100 {/*this field not working*/
    flex: 0 0 100%;
}

@media(min-width: 768px) {
    form {
        max-width: 800px;
        margin: 0 auto;
    }

    .form-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .field {
        flex: 0 0 calc(50% - 1rem);
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.