CODEWITHSUNDEEP
htmlcss
Luís de Almeida
Luís de Almeida

Reputation: 11

Is there a way to only use CSS in order to make a button have the same width as a sibling button?

Basically, I have two buttons that have the same style and are lined beside each other inside a parent div.

<div style="text-align: center">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button2</button>
</div>



.btn {
  min-height: 44px;
  width: 100%;
  max-width: 320px;
  position: relative;
  box-sizing: border-box;
  padding: 6px 24px
  border-radius: 4px;
  outline: none;
  cursor: pointer;

  &.btn-primary {
    border: none;
    background-color: #808080;
    color: #FFFFFF;
  }

  &.button1{
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #b6b6b6;
  }

  &.button2{
    margin-left: 12px;
    width: auto;
    padding: 6px 36px;
  }
}

Because the second button is translated in lots of languages, its width is set to auto. The problem here is that the first button must have the same dynamic width as the second one at all times.

So, is there a way to achieve this condition on the first button by only using CSS? Keep in mind that the buttons are lined on the same row.

Upvotes: 1

Views: 942

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105873

you could also use flex 

div {
  justify-content: center;
  display: flex;
}

.btn {
  flex: 1;
  min-height: 44px;
  width: 100%;
  max-width: 320px;
  position: relative;
  box-sizing: border-box;
  padding: 6px 24px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.btn.btn-primary {
  border: none;
  background-color: #808080;
  color: #FFFFFF;
}
.btn.button1 {
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #b6b6b6;
  flex-shrink: 0 !important;
}
.btn.button2 {
  margin-left: 12px;
  width: auto;
  padding: 6px 36px;
}
<div style="text-align: center">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button2</button>
</div>

You may also use column CSS

div {
  column-count:2;
  width:max-content;
  margin:auto;
}

.btn {
  min-height: 44px;
  width: 100%;
  max-width: 320px;
  position: relative;
  box-sizing: border-box;
  padding: 6px 24px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.btn.btn-primary {
  border: none;
  background-color: #808080;
  color: #FFFFFF;
}
.btn.button1 {
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #b6b6b6;
  flex-shrink: 0 !important;
}
.btn.button2 {
  margin-left: 12px;
  padding: 6px 36px;
}
<div style="text-align: center">
  <button class="btn btn-primary button1">Button1 longer </button>
  <button class="btn btn-primary button2">Button2</button>
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272772

CSS grid can do this:

 body {
  text-align: center
 }
.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin:10px;
}

.btn {
  min-height: 44px;
  max-width: 320px;
  box-sizing: border-box;
  padding: 6px 24px border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.btn-primary {
  border: none;
  background-color: #808080;
  color: #FFFFFF;
}

.button1 {
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #b6b6b6;
}

.button2 {
  margin-left: 12px;
  padding: 6px 36px;
}
<div  class="container">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button2</button>
</div>

<div class="container">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button with long text</button>
</div>

<div class="container">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button text</button>
</div>

Upvotes: 4

Related Questions