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
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>
