Can't move button to the furthest right of div while using flexbox-CodePudding

I'm having a little problem, I created a div and inside that div I'm displaying a text and a button, I'm using flexbox, I want the button's right side to touch the furthest point of the div, so there's no space between the end of the div and the button's end. However, when I try to position it using margins, the button shrinks and doesn't position itself in a way I want to, it just stays in the same position and reduces its size. Here's the code :

<div className='subscribe-background-div'>
     <h2>Email Address</h2>
     <Button  className="btn btn-light me-5 subscribe-btn">Subscribe</Button>
</div>

and the CSS :

.subscribe-background-div{
    width: 339px;
    height: 48px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: space-around;
    align-items: center;
    opacity: 1;
    border: 1px solid #FFFFFFD9;
    border-radius: 12px;
    opacity: 1;
    margin-top: 5%;
}

.subscribe-background-div h2{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0px;
    color: #717179;
    opacity: 1;
    margin-top: 45px;
    margin-left: 20px;
   
}

.subscribe-btn{
    width: 126px;
    height: 48px;
}

Here's a picture of how it looks for now :

And I want it to look like this :

Thanks in advance!

CodePudding user response：

try to use this in your css,

.subscribe-btn{
width: 126px;
height: 48px;
margin-left:auto;

}

CodePudding user response：

there are 2 issue with your code first if this is html and not jsx:

<div className='subscribe-background-div'>

should be

<div class='subscribe-background-div'>

and second this

.subscribe-background-div {
 justify-content: space-around;
}

probably has to be

.subscribe-background-div {
 justify-content: space-between;
}

CodePudding user response：

You might want to remove the justify-content: space-around; in the parent.

Normally we will grow the input (or h2 in your case) to push the button to the end of the div. Simple set flex-grow: 1 to the long item.

.subscribe-background-div h2 {
  flex-grow: 1;
}

DEMO

.subscribe-btn {
    width: 126px;
    height: 48px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.subscribe-background-div h2 {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0px;
    color: #717179;
    opacity: 1;
    /* margin-top: 45px; */
    margin-left: 20px;
}
.subscribe-background-div {
    width: 339px;
    height: 48px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    border: 1px solid #FFFFFFD9;
    border-radius: 12px;
    opacity: 1;
    margin-top: 5%;
    background: #000;
    align-content: center;
}
<div className='subscribe-background-div'>
  <h2>Email Address</h2>
  <button className="btn btn-light me-5 subscribe-btn">
Subscribe
</button>
</div>