use grid to keep TwoColumnsList aligned (#611)

lib/experimental/Widgets/Content/TwoColumnsList/index.tsx

@@ -9,27 +9,19 @@ interface TwoColumnsListType {
   list: TwoColumnsItemType[]
 }
 
-const TwoColumnsItem = forwardRef<HTMLDivElement, TwoColumnsItemType>(
-  ({ title, info }, ref) => {
-    return (
-      <div ref={ref} className="flex flex-row justify-between">
-        <div className="text-f1-foreground-secondary">{title}</div>
-        <div className="font-semibold">{info}</div>
-      </div>
-    )
-  }
+const Item = ({ title, info }: TwoColumnsItemType) => (
+  <>
+    <div className="line-clamp-2 text-f1-foreground-secondary">{title}</div>
+    <div className="font-medium">{info}</div>
+  </>
 )
 
 export const TwoColumnsList = forwardRef<HTMLDivElement, TwoColumnsListType>(
   ({ list }, ref) => {
     return (
-      <div ref={ref} className="flex flex-col gap-3">
+      <div ref={ref} className="grid grid-cols-[1fr_auto] gap-2">
         {list.map((item) => (
-          <TwoColumnsItem
-            key={item.title}
-            title={item.title}
-            info={item.info}
-          />
+          <Item key={item.title} title={item.title} info={item.info} />
         ))}
       </div>
     )