How can I make a card like this

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>

                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </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"/>     <a href="#">Go somewhere</a>
  </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;
}