【CSS】画像の隣に文字がくるコンテンツの実装

/*画像の隣に文字が来るようなカード*/
.card-container{
    display:flex;
    justify-content: center;
    align-items: center;
    max-width: 100%; /*親のサイズによってかわる*/
    height: 12em;
    margin: 8em 2em;
}

/*カード画像のサイズ調整*/
.card-container .card-img {
    width: 640px; /*画像サイズ指定*/
    margin: 0;
    padding: 0;
    overflow: hidden; /*はみ出さないようにする*/
    position: relative; /*親要素の位置を絶対位置で指定*/
  }

.card-container.card-img img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

.card-text{
    width:100%;
    margin: 0.5em 1.5em;
}

.card-text p{
    line-height: 2;
}

/*カードの横の題名・文・ボタンの間隔*/
.card-text-while{
    margin-bottom: 1em;
}

/*カードの「もっとみる」ボタン*/
a.card-container-button {
    display: inline-block;
    max-width: 10em; /* ボタン幅 */
    color: #333333; /* 文字色 */
    border: 1px solid #333333; /* 線幅・種類1本線・色 */
    background: #fff; /* 背景色 */
    padding: 0 0.5em;
    text-decoration: none;
    text-align: center;
    transition: 0.3s;
}
a.card-container-button:hover {
    color: #fff; /* 文字色 */
    background: #ccb3b7; /* 背景色 */
}

.card-container .card-img