Divide page in two columns and align them in HTML

ImageI would like to display the page in two columns below the heading and center align the buttons the way it is.

I do not understand if I have missed any divs here?

I have been trying to do it but its not showing up the way i expected.

<div>
        <div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
        <span>Help us improve Customer Support</span>
        </div>
    <table>
    <tr>
        <td width="50%" class="divText slds-p-bottom--medium leftBtn" >Tell us what you think<br/>
        <div  class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
        <button class="slds-button slds-button--neutral">
        <span class="btn-feedback">Provide feedback</span>
        </button>
        </div>
        </td>
        <td width="50%" class="vertical-liness divText slds-p-bottom--medium rightBtn" >Collaborate with our team<br/>
        <div  class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
         <button class="slds-button slds-button--neutral">
         <span class="btn-feedback">Get Involved</span>
         </button>
         </div>
         </td>
        </tr>
        </table>
    </div>

        .THIS .vertical-liness 
        { 
            border-left: 2px solid red;            
        }

        .THIS .leftBtn{
            padding-left:115px; 
            float:right;
        }

    .THIS .rightBtn{
        padding-left:175px;
    }

    .THIS {
        background-color: #f4f7f7;  /* ibm-cool-white-3; */
        border-top: 1px solid #d0dada; /* ibm-gray-10 */
        font-size: 20px; 
        font-weight: normal;
        color: #272727;  /* ibm-gray-90 */
    }

    .THIS .divText{
        font-size: 16px;
        color: #272727;  /* ibm-gray-90 */
    }

I simplified your markup to show an example. You can create a couple of flex parents and use their centering properties to recreate this.

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.col {
  flex-direction: column;
}
.button {
  padding: 0 3em;
  text-align: center;
}
.button1 {
  border-right: 1px solid #ccc;
}
header {
  margin: 0 0 .5em;
}

<div class="flex col">
  <header>
    Help us improve Customer Support
  </header>
  <div class="buttons flex">
    <div class="button button1">
      <div>
        Tell us what you think
      </div>
      <button>Provide feedback</button>
    </div>
    <div class="button button2">
      <div>
        Tell us what you think
      </div>
      <button>Provide feedback</button>
    </div>
  </div>
</div>