Q:

H2 element and span in one line

I'm trying to put H2 and Span in one line. Currently for H2 I have used BG color and trying to put on the same line the span attributes. Is it possible? I have placed both of them on one DIV which has 79% width. Here is the  HTML code:

.author_name h3 {
  background-color: #1d305b;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 102px;
  opacity: 0.9;
  padding: 15px 20px;
}

.author_name {
  display: inline-block;
  margin-left: -3px;
  width: 79%;
}
<div class="author_name">

  <h3>Carlos</h3><span style="float:right;"><a class="uibutton icon add" href="#button">Message</a></span>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting</p>

</div>

Whats wrong with this code? I have tried to clear the DIV but not working. I also tried to apply to span the display-inline parameter, but no solution. Actually, I would like to place the span on the same line , having the same color of h2 BG color, but don't know if it is possible? Any suggestion would be great :)

A:

This might help you get started, there is not actually any need for the span element (unless you have some other use for it)

.author_name {
    display: inline-block;
    margin-left: -3px;
    width: 79%;
}

.author_name h3 {
  float: left;
  background-color: #1d305b;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 102px;
  opacity: 0.9;
  padding: 15px 20px;
}

p {
  clear: both
}

a {
  margin-top: 102px;
  display: block;
  padding: 5px;
  float: right;
  background: red;
  text-decoration: none;
  color: white;
}
<div class="author_name">

  <h3>Carlos</h3>
  <a class="uibutton icon add" href="#button">Message</a>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting</p>

</div>

