[Grid system]グリッドで要素を横並びにする

画面をコーディングする時に毎回reloadedしてしまうので書いておく
React+bootstrapを使っています

import React from 'react'

const Main = () => {
    return (
        <div className='container mt-4'> {/* ①containerを作成 */} 
            <div className='row'> {/* ②横並びに配置する行を作成 */}
                <div className='col-5'> {/* ③行の中に列を作成して左側に置きたい要素を定義 */}
                    <select className="form-select form-select-sm">
                        <option className="fs-6" selected>今日のおやつは何にしよう</option>
                        <option className="fs-6" value="chiffon_cake">シフォンケーキ</option>
                        <option className="fs-6" value="apple_pie">アップルパイ</option>
                        <option className="fs-6" value="mini_snack_gold">ミニスナックゴールド</option>
                    </select>
                </div>
                <div className='col-4'> {/* ④もう1つ行と右側に置きたい要素を作成 */}
                    <button type='button' className='btn btn-outline-primary fs-6 py-0 mt-1'>決めた！</button>
                </div>
            </div>
        </div>
    );
}
export default Main;

これでもう忘れないはず！