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

Question

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.

This is not possible to do dynamically using CSS. You can't get the width of one element and apply it to another with CSS. You can use JS or you can simply set the buttons to have the same static width regardless of content. — disinfor, Nov 13 '19 at 16:00
@AlainCruz the buttons are lined on the same row not like in that duplicate question — Temani Afif, Nov 13 '19 at 16:11
probably a duplicate if grid, flex or column would be involved https://stackoverflow.com/questions/42656183/how-to-set-flex-items-to-equal-width-according-to-the-item-with-the-longest-cont/42659167#42659167 — G-Cyrillus, Nov 13 '19 at 16:16
@AlainCruz I would really like to see how you can achieve the same. If you do I will close the question as duplicate (I have a gold badge) — Temani Afif, Nov 13 '19 at 16:20

score 4 · Accepted Answer · answered Nov 13 '19 at 16:04

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>

G-Cyrillus · Answer 2 · 2019-11-13T16:19:22.873

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>

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

2 Answers2