PHP フォーム　ボタンずれ

発生している問題

購入ボタンがずれてしまっております。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>自動販売機</title>
    <style>
        #flex {
            width: 600px;
        }

        #flex .drink {
            //border: solid 1px;
            width: 120px;
            height: 210px;
            text-align: center;
            margin: 10px;
            float: left; 
        }

        #flex span {
            display: block;
            margin: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .img_size {
            height: 125px;
        }

        .red {
            color: #FF0000;
        }

        #submit {
            clear: both;
        }

    </style>
</head>
<body>
    <h1>自動販売機</h1>
    <form action="result.php" method="post">
    <div>金額<input type="text" name="money" value=""></div>
    <?php
    foreach (array_reverse($drink_list) as $value) {
    ?>    
        <div id="flex">
            <div class="drink">
                <span><img width = "150px" src="<?php print $img_dir . $value['drink_img']; ?>"></span>
                <span><?php print htmlspecialchars($value['drink_name'], ENT_QUOTES, 'UTF-8'); ?></span>
                <span><?php print htmlspecialchars($value['price'], ENT_QUOTES, 'UTF-8'); ?>円</span>
                <input type="radio" name="drink_id" value="<?php print htmlspecialchars($value['drink_id'], ENT_QUOTES, 'UTF-8'); ?>">
            </div>
        </div>
    <?php } ?>
        <div id="submit">
            <input type="submit" value="■□■□■ 購入 ■□■□■">
        </div>
    </form>
    
</body>
</html>