CODEWITHSUNDEEP
htmlcss
Flama
Flama

Reputation: 868

Align icons and text with CSS

I want the text to be placed to the right of each icon but it ends up looking like this:

enter image description here

I've tried setting the .panel display to table but it looks like a mess.

.panel {
  padding: 0 18px;
  background-color: white;
  /*#F7F7F7;*/
  display: none; //With a function it's then displayed as Block
  overflow: hidden;
  border: 0.5px solid #ccc;
}

.lock {
  float: right;
}

.status {
  float: left;
}

.status_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
  vertical-align: baseline;
  display: table-cell;
}

.lock_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
  vertical-align: baseline;
  display: table-cell;
}
<div class="panel">
  <div class="status">
    <img src="Iconos/closed.png" alt="Closed" class="status_icon" onclick="stat(event,this);">
    <p class="stat_text">Current status: Closed</p>
  </div>
  <div class="lock">
    <img src="Iconos/locked.png" alt="Locked" class="lock_icon" onclick="lock(event,this);">
    <p class="lock_text">Current lock: Locked</p>
  </div>
</div>

Upvotes: 0

Views: 61

Answers (1)

Aryan Twanju
Aryan Twanju

Reputation: 2516

Using display:flex would be best approach to achieve this result. Try this CSS code.

.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  border: 0.5px solid #ccc;
  display: flex;
  justify-content: space-between;
}

.lock {
  display: flex;
}

.status {
  display: flex;
}

.status_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
}

.lock_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
}

Upvotes: 1

Related Questions