Подскажите пожалуйста с расположением элементов

@Юлия1700 · Регистрация: 11.04.2022

Author24 — интернет-сервис помощи студентам

Подскажите пожалуйста как расположить buttons и cards, чтобы cards были возле buttons и занимали весь оставшийся размер страницы, а не снизу. Должно что-то похожее на форум reddit

Код

@using Forum_MVC.Data.Entities;
@model MyViewModel;

@*@{
    var postsModel = Model; 
    var categoriesModel = ViewData["Categories"] as List<Category>; 
}*@

<style>
    .btn-outline-pink {
        color: #FF1493;
        background-color: transparent;
        border-color: #FF1493;
    }

    .btn-outline-pink:hover {
        color: #FFFFFF; 
        background-color: #FF1493; 
        border-color: #FF1493;
    }

    body {
        background-color: #F0F0F0;
    }

    .pink-card {
        background-color: rgba(255, 20, 147, 0.6); 
        color: white;
        border-color: #FF1493; 
        margin-bottom: 20px;
    }

    .pink-card:hover {
        background-color: #FF1493;
    }

</style>


<body>
    <div class="d-flex flex-column col-md-3">
            @if (Model != null)
            {
                foreach (var i in Model.Categories)
                {
                    <button type="button" class="btn btn-outline-pink dropdown-toggle">@i.Name</button>
                }
            }
            else
            {
                <p>Model is null</p>
            }
    </div>

    <div class="text-center">
        @if (Model != null)
        {
            foreach (var i in Model.Posts)
            {
                <div class="card pink-card text-white mb-3" style="max-width: 18rem;">
                    <div class="card-header">@i.Title</div>
                    <div class="card-body">
                        <p class="card-text">@i.Text</p>
                    </div>
                </div>
            }
        }
        else
        {
            <p>Model is null</p>
        }

        
       

    </div>
</body>

	22.09.2023, 19:51