I can't seem to get these two buttons line up buttons like this. How can I do this?

Question

Design:

Explanation: So I used a div and added CSS (display: inline-block;) and width to it, they were perfectly fine, when I added a tag into it to actually make the buttons do something they went on top of each other, I have tried wrapping them tag in another div but can't seem to make it work.

Here is how they look right now:

HTML:

export default function About() {
    return (

        <div className="About--div">

            <h3 className="About--name">Huzaifa Aziz</h3>
            <h5 className="About--job">Frontend Developer</h5>
            <a className="About--site"></a>
            <div className="About--btn">
                <div>
                <form action="mailto:[email protected]">
                    <button className="Email--btn" ><i className='fa fa-envelope'></i> Email</button>
                </form>
                <div className="About--btn--space"></div>
                <form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
                    <button className="Linkedin--btn"><i className='fa fa-linkedin'></i> Linkedin</button>
                </form>
                 </div>
                 </div>
        </div>
    )}

CSS:

* {
    box-sizing: border-box;
   
}
body{
    border-radius: 20px;
    background: #23252C;
    margin: auto;
    width: 100%;
    border: 3px solid #1A1B21;
    padding: 10px;
    font-family: 'Inter', sans-serif;
}

.About--div{
    text-align:center
    
    }

.About--name{
    color: white;
} 
   
.About--job{
    color: #F3BF99;

}

.About--site{
    color: #F5F5F5;

}
.About--btn{
    margin-top: 15px;
}
.About--btn--space{
    width: 17px;
    display: inline-block;
}

.Email--btn{
    background: whitesmoke;
    border: none;
    width: 115px;
    height: 34px;
    border-radius: 5px;
          
}

.Linkedin--btn{
    background: #5093E2;
    border: none;
    width: 115px;
    height: 34px;
    color: white;
    border-radius: 5px;
    
    
}

.fa fa-linkedin{
   
}

It is because your form elements are always going to display as block. You should not be using forms at all for this, but if you were going to you would use a single form element and have the actions tied to the button, not to the form. But there is no need to use a form with something like this. Forms are intended for submitting information from interactive controls. These are just simple links. Neither one of these should even technically be a button element, they should be <a>, but that is a semantics problem. — Stephen M Irving

Peter B Peter B · Accepted Answer · 2022-07-28T23:19:26

A <form> by default uses display: block.

If you change this to e.g. display: inline-block, then they will flow one after the other, the same as regular text or like e.g. buttons do.

Working demo:

// export default function About() {
// ...
// }

const About = function() {
  return (
    <div className="About--div">
      <h3 className="About--name">Huzaifa Aziz</h3>
      <h5 className="About--job">Frontend Developer</h5>
      <a className="About--site"></a>
      <div className="About--btn">
        <div>
          <form action="mailto:[email protected]">
            <button className="Email--btn" >
              <i className='fa fa-envelope'></i>
              Email
            </button>
          </form>
          <div className="About--btn--space"></div>
          <form action="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
            <button className="Linkedin--btn">
              <i className='fa fa-linkedin'></i>
              Linkedin
            </button>
          </form>
        </div>
      </div>
    </div>
  )
}

ReactDOM.render(<About />, document.getElementById('react'));

* {
  box-sizing: border-box;
}
form {
  display: inline-block;
}
body{
  border-radius: 20px;
  background: #23252C;
  margin: auto;
  width: 100%;
  border: 3px solid #1A1B21;
  padding: 10px;
  font-family: 'Inter', sans-serif;
}
.About--div{
  text-align:center
}
.About--name{
  color: white;
} 
.About--job{
  color: #F3BF99;
}
.About--site{
  color: #F5F5F5;
}
.About--btn{
  margin-top: 15px;
}
.About--btn--space{
  width: 17px;
  display: inline-block;
}
.Email--btn{
  background: whitesmoke;
  border: none;
  width: 115px;
  height: 34px;
  border-radius: 5px;
}
.Linkedin--btn{
  background: #5093E2;
  border: none;
  width: 115px;
  height: 34px;
  color: white;
  border-radius: 5px;
}
.fa fa-linkedin{
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

I can't seem to get these two buttons line up buttons like this. How can I do this?

3 Answers