view raw
Vahe Vahe - 8 months ago 29
CSS Question

How do I make two side by side buttons with margin in between have a total width equal to the precedding text input (100% width)?

I am trying to make two buttons scale appropriately with in between margin responsive design.

How do I properly specify width of each button with the margin to stay constant in between?

Equal width buttons are below that I am trying to scale together, without exceeding the total width.

|---Button 1---||--margin in px--||---Button 2---|

Here is what I have so far..

button1.back-btn {
@include btn-inline;
} {
@include btn-inline;

@mixin btn-inline{
width: calc(50% - $form-control-spacing/2 - $border-btn-width*2);
width: -webkit-calc(50% - $form-control-spacing/2 - $border-btn-width*2);
width: -moz-calc(50% - $form-conrol-spacing/2 - $border-btn-width*2);
display: inline-block;


Flexbox can do that.

* {
  box-sizing: border-box;
.wrap {
  width: 80%;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid pink;
.wide {
  flex: 0 0 100%;
button:first-of-type {
  margin-right: 2em;
button {
  flex: 1;
<div class="wrap">
  <input class="wide" type="text" />
  <button>Button 1</button>
  <button>Button 2</button>