Aligning sibling labels with card content
I'm trying to align the labels from the outer div with the contents of the card in the sibling div
getting close but still not there yet
here's my code
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
// using shadcn cards
<div className="flex items-center space-x-4">
<div className="flex flex-col justify-center space-y-4">
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Yearly Return</p>
</div>
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Maximum drawdown</p>
</div>
</div>
<Card className="w-[200px]">
<CardHeader>
<CardDescription className="text-md font-bold">FMGAX</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div className="space-y-4">
<p className="text-sm font-medium leading-none">+39.94% / yr</p>
<p className="text-sm text-muted-foreground text-red-700">-6.94%</p>
</div>
</CardContent>
</Card>
</div>
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
// using shadcn cards
<div className="flex items-center space-x-4">
<div className="flex flex-col justify-center space-y-4">
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Yearly Return</p>
</div>
<div className="flex items-center">
<p className="text-sm font-medium leading-none">Maximum drawdown</p>
</div>
</div>
<Card className="w-[200px]">
<CardHeader>
<CardDescription className="text-md font-bold">FMGAX</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div className="space-y-4">
<p className="text-sm font-medium leading-none">+39.94% / yr</p>
<p className="text-sm text-muted-foreground text-red-700">-6.94%</p>
</div>
</CardContent>
</Card>
</div>
1 Reply
used a default value, but surely there's a more responsive approach
<div className="flex gap-4">
<div className="flex flex-col gap-4 justify-end pb-5">
<p className='text-md font-semibold'>Yearly Return (CAGR)</p>
<p className='text-md font-semibold'>Max Drawdown</p>
</div>
{stats?.map(({ title, cagr, maxDrawdown }, index) => (
<Card className="w-[200px]" key={index}>
<CardHeader>
<CardDescription className="text-md font-bold text-center">{fund.symbol} ({title})</CardDescription>
</CardHeader>
<CardContent className="flex flex-col justify-between items-center h-full">
<div className="space-y-4">
<p className="text-sm font-medium leading-none">{cagr.value.toFixed(2)}% / yr</p>
<p className="text-sm text-muted-foreground text-red-700">{maxDrawdown.toFixed(2)}%</p>
</div>
</CardContent>
</Card>
))}
<div className="flex gap-4">
<div className="flex flex-col gap-4 justify-end pb-5">
<p className='text-md font-semibold'>Yearly Return (CAGR)</p>
<p className='text-md font-semibold'>Max Drawdown</p>
</div>
{stats?.map(({ title, cagr, maxDrawdown }, index) => (
<Card className="w-[200px]" key={index}>
<CardHeader>
<CardDescription className="text-md font-bold text-center">{fund.symbol} ({title})</CardDescription>
</CardHeader>
<CardContent className="flex flex-col justify-between items-center h-full">
<div className="space-y-4">
<p className="text-sm font-medium leading-none">{cagr.value.toFixed(2)}% / yr</p>
<p className="text-sm text-muted-foreground text-red-700">{maxDrawdown.toFixed(2)}%</p>
</div>
</CardContent>
</Card>
))}
