Aligning objects across divs

Question

I have 3 buttons at the bottom of 3 div that I'd like to keep aligned horizontally. The problem I have is that when the browser window is resized, the text above the buttons pushes the buttons down and upsets the horizontal alignment. How can I set things up so that the buttons remain aligned horizontally when the window is resized?

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  background-color: lightblue;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: yellow;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.13%;
}

.span_1_of_3 {
  width: 32.26%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}


/*  Text Style  */

.mytext {
  text-align: center;
}

<h1 style="font-size: 30px; color:#22326C; font-weight: 700; text-align: center;">Welcome Message</h1>

<p style="font-size: 16px; color:#22326C; font-weight: 500; text-align: center;">Use the buttons below to create a ticket:</p>

<div class="section group">
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Report an Issue</p>
    Use the button below if you would like to raise a support ticket for an issue you are experiencing with one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Enhancement Request</p>
    Use the button below if you would like to send us a request for an enhancement to an <strong><em>existing</em></strong> product feature.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Feature Request</p>
    Use the button below if you would like to send us a request for a <strong><em>new</em></strong> feature that you would like to see added to one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
</div>

Answer 1

Use display: flex; to your .section class and place your button to bottom using position: absolute; to keep them horizontally aligned always.

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  background-color: lightblue;
  display: flex;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;  
  background-color: yellow;
  position: relative;
  padding: 0 20px 25px 20px;
}
.col a {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.13%;
}

.span_1_of_3 {
  width: 32.26%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .section{
   display: block;
  }
  .col {
   margin: 1% 0 1% 0%;
   box-sizing: border-box;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}


/*  Text Style  */

.mytext {
  text-align: center;
}

<h1 style="font-size: 30px; color:#22326C; font-weight: 700; text-align: center;">Welcome Message</h1>

<p style="font-size: 16px; color:#22326C; font-weight: 500; text-align: center;">Use the buttons below to create a ticket:</p>

<div class="section group">
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Report an Issue</p>
    Use the button below if you would like to raise a support ticket for an issue you are experiencing with one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Enhancement Request</p>
    Use the button below if you would like to send us a request for an enhancement to an <strong><em>existing</em></strong> product feature.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Feature Request</p>
    Use the button below if you would like to send us a request for a <strong><em>new</em></strong> feature that you would like to see added to one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
</div>

Answer 2

You simply can give a fixed height to the divs and set the overflow-y:auto; hope this will work, cheers...

.mytext{
    height:300px;
    overflow-y:auto;
}

or you also can try giving min-height or max-height properties

Answer 3

You need to use box-sizing:border-box; inside .col

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  background-color: lightblue;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
  padding-left: 20px;
  padding-right: 20px;
  background-color: yellow;
  box-sizing:border-box;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}


/*  GRID OF THREE  */

.span_3_of_3 {
  width: 100%;
}

.span_2_of_3 {
  width: 66.13%;
}

.span_1_of_3 {
  width: 32.26%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%;
  }
}


/*  Text Style  */

.mytext {
  text-align: center;
}

<h1 style="font-size: 30px; color:#22326C; font-weight: 700; text-align: center;">Welcome Message</h1>

<p style="font-size: 16px; color:#22326C; font-weight: 500; text-align: center;">Use the buttons below to create a ticket:</p>

<div class="section group">
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Report an Issue</p>
    Use the button below if you would like to raise a support ticket for an issue you are experiencing with one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Enhancement Request</p>
    Use the button below if you would like to send us a request for an enhancement to an <strong><em>existing</em></strong> product feature.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
  <div class="col span_1_of_3 mytext">
    <p style="font-size: 18px; color:#22326C; font-weight: 700; text-align: center;">Feature Request</p>
    Use the button below if you would like to send us a request for a <strong><em>new</em></strong> feature that you would like to see added to one of our products.
    <br>
    <br>
    <a href="#"><button>Create Ticket</button></a>
  </div>
</div>