我有一个问题，2列的卡，其中左侧将是图像和右侧将是文本。但是我想让‘右栏’高度比‘图像栏’高度少3/4，位置在‘左栏’中间，按钮位置总是在右卡的底部（固定位置），即使卡中的文字不多。
我已经尝试了下面的代码，但它不符合我的需要
https://jsfiddle.net/n0p4tbo9/
HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-12 mt-3">
            <div class="card">
                <div class="card-horizontal">
                    <div class="img-square-wrapper">
                        <img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <button>Learn More</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

我希望输出应该像这样的图片https://imgur.com/ddblXo3