Estoy desarrollando una aplicación de tablero donde el usuario puede ver información sobre criptomonedas, obtuve la información usando la API de coingecko, ahora quiero mostrar la información en un lugar particular de la página, aquí hay una captura de pantalla del proyecto en el que estoy trabajando

Aquí está el código React y el CSS para esta parte de la página que se está procesando

 import React from 'react' import { Typography } from 'antd' import "./PriceCard.css" const { Text, Title } = Typography const PriceCards = ({ cryptoProps }) => { if (!cryptoProps[0]){ return <></> } return ( <div className='priceCard'> <div className="cryptoInfo"> <img src={cryptoProps[0].image}/> </div> <div className="cryptoInfo"> <Title level={3}>All Time High</Title > <Text strong={true}>$ {cryptoProps[0].ath}</Text> </div> <div className="cryptoInfo"> <Title level={3}>Market Cap</Title > <Text strong={true}>$ {cryptoProps[0].market_cap}</Text> </div> <div className="cryptoInfo"> <Title level={3}>Price Change (24 hours)</Title > <Text strong={true}>{cryptoProps[0].price_change_percentage_24h} %</Text> </div> </div> ) } export default PriceCards

 .priceCard { width: 100%; height: 100%; margin-top: 10vh; position: absolute; right: 10; padding-right: 80em; border-style: dashed; } .cryptoInfo { box-sizing: border-box; padding: 10px; float: left; width: 35%; height: 35%; text-align: center; }

Como puede ver, el div principal, con className 'priceCard' tiene un tamaño que abarca toda la página, pero quiero que tenga el tamaño justo en la parte superior izquierda, donde se presenta toda la información, pero el problema es , una vez que trato de entrometerme con el CSS, estropea toda la página y la información que se presenta. Todavía quiero que la información se presente en forma de cuadrícula como se hace ahora, sin que se mueva nada si cambio cualquier CSS al div 'priceCard'.