それぞれの行がそろわない。

Question

htmlの模写をしています。見本のように行をそろえたいです。

自分が書いたもの

見本

html

<section id="contact" class="wrapper">
            <h2 class="sec-title">Contact</h2>
            <form action="method" method="post">
                <dl>
                    <dt><label for="name">NAME</label></dt>
                    <dd><input type="text" id="name" name="your-name"></dd>
                    <dt><label for="email">E-mail</label></dt>
                    <dd><input type="email" id="email" name="your-email"></dd>
                    <dt><label for="message">MESSAGE</label></dt>
                    <dd><textarea id="message" name="your-message"></textarea></dd>
                </dl>
                <div class="button"><input type="submit" value="送信"></div>
            </form>
        </section> 

css

#contact dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#contact dt {
    width: 15%;
}

#contact dd {
    width: 85%;
    margin-bottom:10px;
}

#contact dd input,#contact dd textarea{
    width:100%;
    border:solid 1px #c8c8c8;
    padding:10px;
}

#contact dd textarea{
    height:10rem;
}

displayをflexに、１５％、８５％で分けてみたのですかうまくいきません。