Search code examples
htmlcssglyphicons

Icon positioning in div - ignore text whitespace

I am trying to position an icon inside a div with text.

The icon should stick to the top right corner no matter how much lines of text are inside. How can I achieve that?

.box {
  padding: 5px;
  width: 160px;
  height: 50px;
  margin-bottom: 30px;
  background-color: blue;
  line-height: 20px;
  color: white;
}

span {
  color: red;
  display: inline;
  float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="box">
  This is a sample text inside a sample box. 
  <span class="glyphicon glyphicon-plus"></span>
</div>
<div class="box">
  This is a sample text. 
  <span class="glyphicon glyphicon-plus"></span>
</div>

Fiddle

Solution

  • Add this to your CSS

    .box{
    display: flex;
}
span{
    margin-left: auto
}