<body>
    



    <form action="" class="form">
        <div class="form-group">
            <label for="uname">User name</label>
            <input type="text" id="uname" name="uname" minlength="5"  maxlength="20" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
            <label for="phone">Phone</label>
            <input type="tel" id="phone" name="phone" maxlength="15" minlength="15" required>
        </div>
        <div class="form-group">
            <label for="comment">Comment</label>
            <textarea name="comment" id="comment" cols="30" rows="10" maxlength="200"></textarea>
        </div>
        <div class="form-group">
            <button>Submit</button>
        </div>
    </form>



</body>
.form{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 15%;
    left: 35%;

}

.form-group{
    display: flex;
    flex-direction: column;
    width: 400px;
    margin-top: 20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.