2ヶ月分のカレンダー2列

<!DOCTYPE html>
<html>
<head>
    <title>2か月分のカレンダー</title>
    <style>
        .calendar-container {
            display: flex;
            justify-content: space-between; /* カレンダーの間に余白を設けます */
        }
        
        .calendar {
            flex: 1;
            margin: 10px; /* カレンダーの周りに余白を設けます */
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="calendar-container">
        <div class="calendar">
            <h2>月1</h2>
            <table>
                <tr>
                    <th>日</th>
                    <th>月</th>
                    <th>火</th>
                    <th>水</th>
                    <th>木</th>
                    <th>金</th>
                    <th>土</th>
                </tr>
                <!-- ここに月1のカレンダー日付を生成するコードを挿入 -->
            </table>
        </div>
        <div class="calendar">
            <h2>月2</h2>
            <table>
                <tr>
                    <th>日</th>
                    <th>月</th>
                    <th>火</th>
                    <th>水</th>
                    <th>木</th>
                    <th>金</th>
                    <th>土</th>
                </tr>
                <!-- ここに月2のカレンダー日付を生成するコードを挿入 -->
            </table>
        </div>
    </div>
</body>
</html>