How to make the text inside my <Col> vertical align follow the size of the <img>? (AntDesign)

Question

This is what it currently looks like butI wish all the details which is title,price and quantity and be vertically align center to the image while keeping the details inside the column

How make the height of similar to the height of the i put in which both is inside the tag?

I am using Ant Design

<Row>
  <Col
    span={6}
    style={{
      fontWeight: 600,
      paddingLeft: 10,
      alignItems: "center",
      textAlign: "center",
      verticalAlign: "center",
      justifyContent: "center"
    }}
  >
    <img
      style={{ width: "100%", height: "100%" }}
      src={
        "https://www.needen.com/files/model_specifications/2015/8/31/121154/121154_big.jpg?1441032179"
      }
    />
  </Col>

  <Col
    span={6}
    style={{
      display: "flex",
      paddingLeft: 10,
      alignItems: "center",
      verticalAlign: "middle"
    }}
  >
    <h5 style={{ verticalAlign: "middle" }}>T-Shirt 1</h5>
  </Col>

  <Col
    type="flex"
    span={4}
    style={{
      minHeight: 100,
      fontWeight: 600,
      verticalAlign: "middle",
      textAlign: "center",
      alignItems: "center",
      justifyContent: "center"
    }}
  >
    RM 19.90
  </Col>

  <Col
    span={4}
    style={{
      minHeight: 100,
      fontWeight: 600,
      textAlign: "center",
      alignItems: "center",
      verticalAlign: "middle"
    }}
  >
    2
  </Col>

  <Col
    span={4}
    style={{
      minHeight: 100,
      fontWeight: 600,
      textAlign: "right",
      paddingRight: 10,
      alignItems: "center",
      verticalAlign: "middle"
    }}
  >
    <p
      style={{ height: "100%", verticalAlign: "middle", alignItems: "center" }}
    >
      RM 38.90
    </p>
  </Col>
</Row>

The whole row should be same size with the image height and the words should be vertical align center...

Answer 1

Refer to Grid API:

<Row
  type="flex"
  style={{ alignItems: "center" }}
  justify="center"
  gutter={10}
/>

Example:

export default function App() {
  return (
    <Row
      type="flex"
      style={{ alignItems: 'center' }}
      justify="center"
      gutter={10}
    >
      <Col>
        <img
          style={{ width: 100, border: '1px solid palevioletred' }}
          alt="white-shirt"
          src={
            'https://www.needen.com/files/model_specifications/2015/8/31/121154/121154_big.jpg?1441032179'
          }
        />
      </Col>
      <Col>
        <Row
          type="flex"
          gutter={10}
          style={{ alignItems: 'center', border: '1px solid palevioletred' }}
        >
          <Col>T-Shirt 1</Col>
          <Col>RM 19.90</Col>
          <Col>2</Col>
          <Col>RM 38.90</Col>
        </Row>
      </Col>
    </Row>
  );
}