ちょっとだけ綺麗に検索枠をCSSで作る

ふと検索枠つくってみた。
prefixとかは入ってないけれど、そういうのはautoprefixerでやろう！

<div>
    <div class='flex'>
        <input class='textInput' type="text" placeholder="" value="" autocomplete="off">
        <button type='button' class='option'>オプション</button>
        <input type='submit' value='検索' class="submit">
    </div>
</div>

    .flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .textInput {
        width: 60%;
        height: 50px;
        margin: 10px 0 10px;
        padding: 5px 5px 5px 15px;
        font-size: 1.7em;
        color: #555;
        border: 2px solid #3182d9;
        border-radius: 1em;
    }

    .option {
        color: #fff;
        font-size: 1em;
        height: 50px;
        background: #3182d9;
        margin: 10px 0 10px -60px;
        padding: 10px;
        border-radius: 0 10px 10px 0;
        border: 2px solid #3182d9;

    }

    .submit {
        width: 90px;
        height: 50px;
        color: #fff;
        background: #5cb85c;
        background-origin: border-box;
        margin: 10px 5px;
        padding: 10px;
        padding-left: 25px;
        font-size: 1em;
        border: 2px solid #4cae4c;
        border-radius: 10px;
    }