フォームレイアウト

by Kissy

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flexbox Layout</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        
        <h1>Form Layout</h1>
        <div class="form">
            <input class="form-field" type="text" placeholder="E-mail">
            <button class="form-item">Send</button>
        </div>
        
    </body>
</html>

CSS

body {
    background: #eee;
}

/* Form layout */
.form {
    display: flex;

    width: 420px;
}
.form-field {
    flex: 1;
}