<div class="card">
    <div class="card-image">
        <img class="img" src="https://ccg-wheads.jp/wp-content/uploads/2023/11/sample-image.jpg" alt="">
    </div>
    <div class="card-sentence">
        <p class="card-title">タイトル</p>
        <p class="card-text">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。<br>
            夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。</p>
    </div>
</div>

<div class="card">
    <div class="card-sentence">
        <p class="card-title">タイトル</p>
        <p class="card-text">春は、あけぼの。やうやう白くなりゆく山ぎは少し明りて紫だちたる雲の細くたなびきたる。<br>
            夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。</p>
    </div>
</div>
body {
    width: 1000px;
    margin: 60px auto;
}
.card {
    margin-top: 80px;
    padding: 20px;
    border: #333333 1px solid;
    
    .card-sentence {
        .card-title {
            font-size: 18px;
            font-weight: bold;
        }
        .card-text {
            margin-top: 8px;
            font-size: 16px;
        }
    }
}

.card:has(.card-image) {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    .card-image {
        width: 300px;
        height: 200px;
        .img {
            width: 100%;
        }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.