               [p "Sure, use the shortcuts. But it is only by understanding triples that you become a power user of flexbox (or re-com layouts)."]
               [gap :size "10px"]]])
 
-(defn size-table
-  []
+
+(defn table-row
+  [size gsb description header?]
   (let [col1 "80px"
         col2 "130px"
-        col3 "500px"]
+        col3 "500px"
+        col3-style {:style {:width col3}}]
+  [h-box
+   :class (if header? "rc-div-table-header" "rc-div-table-row")
+   :children [[label :width col1 :label size]
+              [label :width col2 :label gsb]
+              (if header?
+                [label :width col3 :label description]
+                [:span col3-style description])]]))
+
+(defn size-table
+  []
     [v-box
      :children [[title :level :level2 :label ":size is flex"]
                 [p "Both " [:span.bold "v-box"] " and " [:span.bold "h-box"] " take a " [:span.bold ":size"] " parameter which "

               ]]]])


(defn the-key-style
  []
  [v-box
   :children [[title :level :level2 :label "The Key Style"]

            [re-demo.utils :refer [panel-title title2]]))



(defn components-section
  []
  [v-box
   :children [[title :level :level2 :label "The Components"]
              [p "Re-com has layout components which are not themselves visible -
              they just arrange other components."]
              [p "The key components are " [:span.bold "h-box"] " and " [:span.bold "v-box"] " which arange
               their children horizontally and vertically respectively. Because they are
               mutually nestable, you can combine them to create arbitrarily complex layouts."]]])

(defn example-section
  []
  [v-box
   :children [[title :level :level2 :label "Simple Example"]
              [h-box
               ;:gap "40px"
               :children [
                          [v-box
                           :children [
                                      [p "This code ..."]
                                      [:pre
                                       {:style {:width "460px"}}
                                       "[v-box
  :children [[box :child \"Header\"]
             [h-box
              :height \"100px\"
              :children [[box :size \"70px\" :child \"Nav\"]
                         [box :size \"1\" :child \"Content\"]]
             [box :child \"Footer\"]]]"]]]
                          [box
                           :size "100px"
                           :align-self  :center
                           :justify :center
                           :child  [:div {:class "md-forward rc-icon-larger"
                                          :style {:color "lightgrey"}}]]
                          [v-box
                           :children [[p "... results in:"]
                                      [v-box
                                       :gap      "1px"
                                       :children [[box :style {:background-color "lightgrey"} :child "Header"]
                                                  [h-box
                                                   :gap "1px"
                                                   :height "100px"
                                                   :children [[box :size "70px" :style {:background-color "lightgrey"} :child "Nav"]
                                                              [box :size "1" :style {:background-color "lightgrey"} :child "Content"]]]
                                                  [box :style {:background-color "lightgrey"} :child "Footer"]]]
                                      [gap :size "15px"]]]]]]])

(defn flex-box-section
  []
  [v-box
   :gap "10px"
