How can I make a card like this - html

Question

So I have this card where the title of it"DcBlog" is in the same line with the content "My Cool Server", I don't want it like that ,but I can't solve this problem
.cards div:first-child {
border-radius: 10px 10px 0 0;
}
.cards div:last-child {
border-radius: 0 0 10px 10px;
margin-bottom:10px;
}
.card {
background-color: #212121;
border-radius:0 0 0 0;
}
.card .btn {
background-color:#d41950;
color:white;
outline:none;
border: none;
}
.card-title {
color:#d89e45;
margin-left:10px;
}
.card-top{
display: flex;
align-items:center;
}
.card-icon {
width:100px;
height:100px;
border-radius:50%;
}
<div class="card" style="width: 100%">
<div class="card-body">
<div class="card-top">
<img class="card-icon" src="https://cdn.discordapp.com/icons/888480205709144084/157cff143fe47dbf7d291a37dc6164dd.png">
<h5 class="card-title">dcblog</h5>
<div class="container">
<p class="card-text">My Cool Server</p>
</div>
</div>
Go somewhere
</div>
</div>
and I want to make the title and the content of the card in different lines,like this one:
how can I do that?

Answer 1

I believe this Fiddle does what you want.
Essentially, you want to use Flexbox for the left part.
Right part will stack naturally.
HTML
<div class="card">
<div class="left-side">
<img src="https://cdn.discordapp.com/icons/888480205709144084/157cff143fe47dbf7d291a37dc6164dd.png"/> Go somewhere
</div>
<div class="right-side">
<div class="top">
<h1>Dcblog</h1>
<h2>My cool server</h2>
</div>
<div class="bot">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc nisl, luctus a magna sit amet, pharetra euismod tortor. Suspendisse ut eros nisl. Morbi luctus lacus sit amet consectetur suscipit. Suspendisse vitae est erat. Integer in tincidunt tortor.
</p>
</div>
</div>
</div>
CSS
.card {
display: flex;
padding: 10px;
background-color: #212121;
}
.left-side {
display: flex;
flex-direction: column;
align-items: center;
}
.left-side > a {
color: #FFF;
background-color: #d41950;
width: 100%;
margin-top: 10px;
text-align: center;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
}
.right-side {
padding-left: 10px;
}
.top > h1 {
margin: 0;
color: #d89e45;
}
.top > h2 {
margin: 0;
color: #FFF;
}
.bot > p {
color: #DDD;
}