Question: I am using `Bootstrap` and I want add a button at right of a bar that looks like `<input-group-addon>`. To be specific, full height and locates at right most.

I've tried `height: 100%` but the button styles super high.

this is part of my code: <https://plnkr.co/edit/lK8vt0wT1xDesuOZW8vU?p=preview>

this is what I m looking for [![enter image description here](https://i.stack.imgur.com/TjhI7.png)](https://i.stack.imgur.com/TjhI7.png)

Answer: 
**Using Position Property** 

```css
.panel-heading{
  position: relative;
}
button.btn{
  position: absolute;
  top:0;
  bottom:0;
  border-radius: 0;
  right: 0;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="panel panel-default">
      <div class="panel-heading">Assist Panel<button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
      <div class="panel-body"></div>
    </div>
```
By using display flex on the parent panel you could set the panel heading and the button next to each other and then they will naturally have the same height. Then would just need to adjust to panel-heading width.

```css
.panel{
  display: flex;
}

.panel-heading {
  width: 100%;
}
```

```html
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>
    <div class="panel panel-default">
      <div class="panel-heading">Assist Panel</div>
      <button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button>
    </div>
  </body>

</html>
```