CODEWITHSUNDEEP
cssflexboxcss-grid
mat
mat

Reputation: 33

How to align button to the right in text container?

I have container and in it I have three child elements: h2, p and button. I want make a button on the right of h2 and p aligned center. The html can't be changed, only css using flexbox or grid.

div {
  background: rgba(0,0,0, .5);
  padding: 20px 40px;
  color: #fff;
}

div h2 {
  margin-bottom: 20px;
}
div p {
  margin: 0
}

div button {
  padding: 15px 20px;
}
<div>
  <h2>Test</h2>
  <p>Description test description</p>
  <button>submit</button>
</div>

enter image description here

Upvotes: 0

Views: 609

Answers (1)

wjatek
wjatek

Reputation: 1006

You can use CSS Grid to change the button position:

div {
  background: rgba(0,0,0, .5);
  padding: 20px 40px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div h2 {
  margin-bottom: 20px;
}

div p {
  margin: 0
}

div button {
  padding: 15px 20px;
    grid-column: 2;
    grid-row: 1;
}
<div>
  <h2>Test</h2>
  <p>Description test description</p>
  <button>submit</button>
</div>

Upvotes: 1

Related Questions