title: Flexbox align center with another element in right of it
body: <p>I want to implement page that looks like
  <a href="https://i.stack.imgur.com/qFG23.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qFG23.png" alt="this picture"></a></p>
  
  <p>It has <code>next button</code> that must in <code>absolute position</code> in the middle of the page, and next to it there is <code>skip button</code> that the text must center with <code>next button</code>'s text.
  I am struggling to make this happen using <code>flexbox</code>, maybe someone can help me.
  so far my code is like this</p>
  
  <p>component:</p>
  
  <pre><code>  &lt;View style={{ alignSelf: 'center', position: 'absolute' }}&gt;
      &lt;Button
        buttonStyle={styles.nextButton}
        onPress={this._onPress}
        activeOpacity={0.9}
      &gt;
        &lt;Text style={styles.nextText}&gt;NEXT&lt;/Text&gt;
      &lt;/Button&gt;
      &lt;Text
        style={styles.skipButton}
        onPress={this._onSkipPress}
      &gt;
        SKIP
      &lt;/Text&gt;
    &lt;/View&gt;
  </code></pre>
  
  <p>styles:</p>
  
  <pre><code>  nextButton: {
      backgroundColor: 'white',
      height: 52,
      width: 128,
      borderRadius: 26,
      bottom: 24,
      elevation: 1
    },
    skipButton: {
      marginRight: 20,
      fontSize: 14
    },
  </code></pre>
  
  <p>I know that this is <code>react-native</code> code, but if you can solve it using <code>css</code>, I believe I can convert it to <code>react-native</code>.
  Note: please use <code>flexbox</code> only</p>