Hỏi về column và row trong bootrap

[nguoithichdua (Sandygem)]

    <div class="container">
    <div class="grid">
        <div class="row">
            <form class="col-8" style="background-color: yellow;">
                <div class="row">
                    <span class="col-4" style="background-color: orange;">Tên đăng nhập</span>
                    <input type="text" class="col-8" placeholder="admin" style="background-color: pink;">
                </div>
                <div class="row">
                    <span class="col-4" style="background-color: orange;">Mật khẩu</span>
                    <input type="text" class="col-8" placeholder="abcxyz" style="background-color: pink;">
                </div>
            </form>
            <div class="col-4" style="background-color: blue;">
                <div class="row">
                    <div class="col">
                        Nội dung khác
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-2" style="background-color: #550000; color: white;">
                Thông báo
            </div>
            <div class="col-10" style="background-color: violet;" >
                Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ 
            </div>
        </div>
    </div>
</div>

Chào mọi người, cho em hỏi, em tạo giao diện như trên. Có cách nào để căn “Thông báo” có cùng chiều rộng với “Tên đăng nhập” và “Mật khẩu” không ạ?
Vì phần “Nội dung thông báo” phải chiếm hết phần còn lại của row.

Em nghĩ là có thể làm như đoạn code thứ 2, nhưng thầy nó ko hợp lý lắm, vì làm thế tiêu đề (tên đăng nhập) với phần input tách biệt nhau.

       <div class="row">
        <div class="col-3">
            <div class="row">
                <div class="col" style="background-color: orange;">Tên đăng nhập</div>
            </div>
            <div class="row">
                <div class="col" style="background-color: orange;">Mật khẩu</div>
            </div>
            <div class="row">
                <div class="col" style="background-color: #550000; color: white;">Thông báo</div>
            </div>
        </div>
        <div class="col-9">
            <div class="row">
                <div class="col-8">
                    <div class="row">
                        <div class="col">
                            <input type="text" class="col-8" placeholder="admin">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input type="text" class="col-8" placeholder="abcxyz">
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    Nội dung khác
                </div>
            </div>
            <div class="row">
                Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ Không hợp lệ 
            </div>
        </div>
    </div>

Có cách nào để căn “Thông báo” có cùng chiều rộng với “Tên đăng nhập” và “Mật khẩu” không ạ?
Em cảm ơn