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:huzaifaaziz90@gmail.com">
                    <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{
   
}

Answer 1

A <form> by default uses display: block .

If you change this to eg display: inline-block , then they will flow one after the other, the same as regular text or like eg 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:huzaifaaziz90@gmail.com"> <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>

Answer 2

Using flexbox, all you would need to do is add the following to the parent element of the buttons:

display: flex;
align-items: center;

Add a classname to that div just above your opening form tag and apply to that one. Other guys are right about the form tag being redundant but shouldn't be an issue.

Answer 3

<div className="about-buttons">
   <a className="about-button btn-email" href="mailto:huzaifaaziz90@gmail.com">
      <i className="fa fa-envelope"></i>Email
   </a>

   <a className="about-button btn-email" href="https://www.linkedin.com/in/huzaifah-aziz-63092996/">
      <i className="fa fa-linkedin"></i>LinkedIn
   </a>
</div>

.about-buttons {
   display: inline-block;
}

.about-button:not(:last-of-type) {
   margin-right: 25px;
}

.about-button i {
   margin-right: 5px;
}