title: Keep Two Text Values Vertically aligned in React Native
body: <p>I'm doing a project where I have to manage 6 texts values. Each pair has to be aligned vertically. As an example check below.</p>
  
  <pre><code> Latest    Old     New
    6M       10      20K
  </code></pre>
  
  <p>As shown in above example, Text Value call <code>Latest</code> has to be aligned with <code>6M</code> where <code>6M</code> text value change over time. So keeping these two text values vertically aligned is a must. Same concept applies to other two columns.</p>
  
  <p>Also, Since there are 3 columns only, These should evenly use Device display width.</p>
  
  <p><strong>My Code</strong></p>
  
  <pre><code>&lt;View style={{flexDirection:'row'}}&gt;
    &lt;View style={{flexDirection:'column'}}&gt;
       &lt;View style={{flexDirection:'column',alignItems:'flex-start',paddingTop:1,paddingBottom:3}}&gt;
       {
          this.state.fontLoaded ? (
          &lt;Text style={{fontSize:14,minWidth:getWidth()*0.25}}&gt;Latest&lt;/Text&gt;    // Select K or M or B or T
          ) : null
       }
       &lt;/View&gt;
       &lt;View style={{flexDirection:'column',alignItems:'flex-start',paddingTop:1,paddingBottom:3}}&gt;
       {
           this.state.fontLoaded ? (
           &lt;Text&gt;6M&lt;/Text&gt;    // Select K or M or B or T
           ) : null
       }
    &lt;/View&gt;
   &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><code>getWidth()</code> function returns Device display width. I wanted to make this program responsive to all iOS and Android display sizes. That's why I used <code>getWidth()</code> function.</p>
  
  <p><strong>Output</strong></p>
  
  <p>Below sketch kind of similar to what I receive by above code.</p>
  
  <pre><code>Latest
      6M
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>As in above code, when I change <code>6M</code> value, it does not align with <code>Latest</code> text. Also if I duplicate above code to generate other two columns, It makes everything a mess. What am I missing here? How can I change my code to get what I required?</p>