How do I make a button full height of the parent container and right-aligned?

user_4809938 0
Viewed 14170

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

twitter-bootstrap css
4 Answers

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.

.panel{
  display: flex;
}

.panel-heading {
  width: 100%;
}
<!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>

user_180120010
Related