Align two divs in separate containers at the same time

Question

I have two DIVs that are in a flexible string wrapper box. Thus, I have two buttons that I want to always align.

.main-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.container {
  flex: 1;
  
  flex-flow: column wrap;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  min-width: 300px;
}
.container> * {
  flex: 1;
}
button {
  width: 100%;
}

<div class="main-container">


  <div class="container">
    <h2>
        Container 1
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
  </div>
  <div class="container">
    <h2>
        Container 2
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test and this is a long text to wrap around. So let it be</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
    <div class="more-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

Run codeHide result

In mobile resolution, it should look like

In Small Resolution, it should look like this:

In the desktop

JSFIDDLE: https://jsfiddle.net/d69jcpnz/

Answer 1

Try brok

.main-container {
  display: flex;
  flex-flow: row nowrap; /*modification here*/
  justify-content: center;
}
.container {
  flex: 1;
  
  flex-flow: column wrap;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  min-width: 300px;
}
.container> * {
  flex: 1;
}
button {
  width: 100%;
}


/*add here*/
@media screen and (max-width: 660px) {
  .main-container {
    flex-flow: row wrap;
  }
}

Run codeHide result

Answer 2

ok sry bro I did not understand your goal, try the following:

.main-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.container {
  flex: 1;
  flex-flow: column wrap;
  justify-content: center;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  min-width: 300px;
}
.container> * {
  flex: 1;
}
button {
  position: relative; /* position changed */
  width: 100%;
}
button.first { /* added style here */
  top: 5.65rem;
}

<div class="main-container">


  <div class="container">
    <h2>
        Container 1
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button class="first"> <!-- added class here -->
      Click me
    </button>
  </div>
  <div class="container">
    <h2>
        Container 2
    </h2>
    <div class="inner-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test and this is a long text to wrap around. So let it be</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
    <button>
      Click me
    </button>
    <div class="more-container">
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
      <div>test</div>
    </div>
  </div>
</div>

Run codeHide result

The result is similar to your desired result.

This is normal?