Css 如何在保持右侧栏位于右侧的同时获得侧边栏的全宽？

我只想把一切都放在右边。问题是第二个右div总是在左div的底部，如果我把height 100%放在左div上，那么移动版本就糟透了

这是我的代码和css。我想把菜单放在左边，下面什么都不放，右边是浮动的“卡片”

<div class="feed-wrapper">
    <div class="container">
        <div class="col-md-3">
            <div class="feed-left">
                <ul>
                    <li>Laracasts</li>
                    <li>Modern web</li>
                    <li>Css daily</li>
                </ul>
            </div>
        </div>
        @foreach($feeds as $feed)
            <div class="col-md-9">
                <div class="feed-card">
                    <div class="feed-card-left" style="background-image: url({{ $feed->image }})">
                        {{-- <img src="{{ $feed->image}}"> --}}
                    </div>
                    <div class="feed-card-right" >
                        <h3>{{ $feed->title }}</h3>
                        <p>{{ str_limit($feed->description, 100) }}</p>
                        <hr>
                        {{ $feed->resource }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

---

可以将侧边栏放在包含display:flex的div中

或者容器div中所有右对齐的内容，只有80%的屏幕宽度或任何宽度，并且向右浮动。你是说类“侧边栏”？

.feed-wrapper {
    background: #EEF2F3;
}

.feed-left {
    margin: 20px 0;
    border-radius: 10px;
    background: white;
    display: flex;
}

.feed-left {
    padding: 10px;
}
.feed-left ul {
    list-style-type: none;
}

.feed-card {
    background: white;
    margin: 20px 0px;
    display: flex;
    border-radius: 5px;
}

.feed-card-left  {
    width: 25%;
    background-position: center;
    background-size: 350px;
    background-repeat: no-repeat;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.feed-card-right {
    margin-left: 15px;
    float: right;
}