Center form items in div outside of form
<p>I have complex form section that actually contains two forms side by side. The main form is on the right and I need this form's submit buttons to be centered in the form conatiner. Here's a fiddle of a simplified version of what I'm dealing with:   </p>

<p><a href="https://jsfiddle.net/as2e4d0d/5/" rel="nofollow">https://jsfiddle.net/as2e4d0d/5/</a></p>

<p>The html for the fiddle:</p>

<pre><code>&lt;div class="form post-form"&gt;
  &lt;div class="post-form__left"&gt;
    &lt;form class="form__form" method="POST" action="#" accept-charset="UTF-8"&gt;
      &lt;textarea type="text" class="form__input post-form__question-input" autocomplete="off" name="question" placeholder="Ask a new question"&gt;&lt;/textarea&gt;
      &lt;input type="submit" value="Ask" class="button button--green post-form__question-button"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="post-form__right"&gt;
    &lt;form class="post-form__form" method="POST" action="#" accept-charset="UTF-8"&gt;
      &lt;div class="form__section post-form__textarea-container"&gt;
        &lt;textarea class="form__input post-form__textarea" type="text" name="body" placeholder="Write your entry"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div class="post-form__bottom"&gt;
        &lt;div class="form__section form__button-row post-form__buttons"&gt;
          &lt;input class="form__button button button--ghost" type="submit" name="type" value="Save Draft"&gt;
          &lt;input class="form__button button button--ghost" type="submit" name="type" value="Publish"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And the css for the fiddle:</p>

<pre><code>.post-form {
  position: relative;
  display: flex;
  border: 1px solid black;
  height: 200px;
 }

.post-form__left {
  flex: 1 0 33.33%;
  text-align: center;
}
.post-form__right {
  flex: 3 0 66.67%;
}

.post-form__question-button {
  display: block;
  margin: auto;
}

.post-form__left textarea {
  margin: auto;
  width: 90%;
}

.post-form__right textarea {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
}

.post-form__bottom {
  position: absolute;
}
</code></pre>

<p>I need the "post-form__bottom" div, with the "Save Draft" and "Publish" buttons, to be centered in the top level "post-form". In the fiddle, the buttons need to be centered in the red box. Ive tried setting position absolute on "post-form__bottom", but that did nothing. I tried messing around with negative margins, but that got really messy and I could never get it right. Any help would be appreciated.</p>

<p><strong>Solution</strong>
Set width to 100%. Rookie mistake!<br>
<a href="https://jsfiddle.net/as2e4d0d/6/" rel="nofollow">https://jsfiddle.net/as2e4d0d/6/</a></p>