Semantic UI React: Align 2 columns in middle and 1 to the top

Question

I am composing the following using Semantic UI React: column 1: text, column 2 and 3: images. While the images are middle aligned to each other, the text next to them is aligned to the top.

Here is the code. I have to put marginTop: "-15em" to move the title up. Is there a better way to do this?

import React from "react";
import {Grid,Header} from "semantic-ui-react";

<Grid>
  <Grid.Row verticalAlign="middle">
    <Grid.Column width={4}>
      <Header as="h4" style={{ marginTop: "-15em" }}>
         Title
      </Header>
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Suspendisse finibus hendrerit nulla, quis mattis felis eleifend 
       sed. Vivamus a blandit tellus. Donec non erat enim. Nullam 
       vulputate lectus a finibus tempor. Fusce vel purus est. Praesent 
       ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
       In maximus enim sem, id dignissim odio volutpat vitae.
       </p>
     </Grid.Column>

     <Grid.Column width={6}>
       <img src={img1} alt="img1" />
      </Grid.Column>
          
     <Grid.Column width={6}>
       <img src={img2} alt="img2" />
     </Grid.Column>
  </Grid.Row>
</Grid>

Answer 1

You can put verticalAlign property on each Grid.Column and remove this property from the Grid.Row. Hopefully it should work

import React from "react";
import {Grid,Header} from "semantic-ui-react";

<Grid>
  <Grid.Row>
    <Grid.Column width={4}>
      <Header as="h4">
         Title
      </Header>
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Suspendisse finibus hendrerit nulla, quis mattis felis eleifend 
       sed. Vivamus a blandit tellus. Donec non erat enim. Nullam 
       vulputate lectus a finibus tempor. Fusce vel purus est. Praesent 
       ac ex ac ex vulputate vulputate. Donec dapibus pharetra ultrices.
       In maximus enim sem, id dignissim odio volutpat vitae.
      </p>
     </Grid.Column>

     <Grid.Column verticalAlign="middle" width={6}>
       <img src={img1} alt="img1" />
     </Grid.Column>
    
     <Grid.Column verticalAlign="middle" width={6}>
       <img src={img2} alt="img2" />
     </Grid.Column>
  </Grid.Row>
</Grid>