Position button inside alert with bootstrap

Question

For last few hours I've tried every possible way that came to my mind and was found on SO to move a button inside <div> with alert class to the right without changing it's vertical position, so it stays aligned with text, but unfortunately I came up with nothing.

Here is fiddle with bare html part: https://jsfiddle.net/me420sky/

What I want is to put button on the right side. Yes, I know pull-right but it takes it out of regular flow and text is not aligned any more. Same goes with positioning as then page is not responsive any more.

Please can anyone help?

Answer 1

This will work.

You could remove the line-height property of the span if it doesn't matter that the text isn't vertically aligned with the button.

.alert .btn-danger {
  float: right;
}

.alert span {
  line-height: 34px;
}

.alert > div:after {
  clear: both;
  content: '';
  display: table;
}

Working Example

Option 2: Without fixed line height of span tag

In this case, you are giving the parent a line-height instead of the text. So if you've got breaking lines, the large line-height has no effect on the text.

.alert span {
  vertical-align: middle;
  line-height:normal;
}

.alert > div {
  line-height: 34px;
}