CODEWITHSUNDEEP
htmlcss
aakhilv
aakhilv

Reputation: 145

How to align icon to left and text to the right of it

Does anyone know how to produce something like this using CSS and HTML?

I tried it myself, but it looks like this:

Here's what I have so far:

a {
  text-decoration: none;
}

.bar {
  background: #0f0f0f;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
}

.text {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>

Upvotes: 0

Views: 4159

Answers (3)

DCR
DCR

Reputation: 15657

use flex, it's easier

a {
  text-decoration: none;
}

.bar {
  background: pink;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display: flex;
  justify-content:flex-start;
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
  border:solid 2px red;
}

.text {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>

Upvotes: 1

tacoshy
tacoshy

Reputation: 13001

As you already use CSS-Grid, I will go with it. you just need to change a single line:

.bar { grid-template-columns: repeat(2, 1fr); }

to

.bar { grid-template-columns: repeat(2, min-content); }

min-content will take only as much space as needed. 1fr, will take 1 fraction (in this case 50%) of the box width.

a {
  text-decoration: none;
}

.bar {
  background: #0f0f0f;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, min-content);
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
}

.text {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>

Upvotes: 6

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

You are using display:grid; on .bar of equal width columns that's why they are far apart.

Simple flex; property on bar automatically gets items side by side by default. That would do it.

a {
  text-decoration: none;
}

.bar {
  background: #0f0f0f;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display:flex;
  align-items:center;/* only if required to set times to center vertically*/
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
}

.text {
  width: 100%;
}
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>

Upvotes: 0

Related Questions