Elm-ui spacing issue [SOLVED]

[stevensonmt]

I have some simple card style layouts that contain a headline followed by text. The headlines are all of equal height but the text is of variable length. All cards should be the same height. All text should align their tops according to the spacing below the headline. What I am getting instead is all text aligning in the middle of the card due to a margin-bottom: auto setting being placed on the headline. What am I missing?

link to ellie example

type Category = Foo | Bar | Baz

myInfo = { title = "foo bar baz"
         , foo = {first = "Lorem", second = "ipsum", third = "dolor sit amet," }
         , bar = {first = "consectetur ", second = "adipiscing elit. Duis", third = "placerat dignissim eros" }
         , baz = {first = "a varius. Nullam at urna", second = "nec justo consequat facilisis nec eu arcu. Nunc placerat vestibulum viverra. ", third = " Integer id orci erat. Pellentesque eros metus, fringilla ut ex at, dignissim varius dui. Integer ac est mauris. Aenean volutpat pharetra pellentesque." }  }

card headline category =
    (column [ width (fill |> minimum 400), height fill, padding 10, spacing 10 ]
        [ (headerBox headline)
        , cardBody category myInfo 
        ]
    )

headerBox headline =
    Element.row [ Background.color (rgba255 100 100 100 1), spacing 0, width fill, height (px 72), centerX, alignTop ]
        [ Element.el  [ centerX, centerY  ]  (text headline)  ]

cardBody category info =
   let currentCategory =
           case category of
               Foo -> info.foo
               Bar -> info.bar
               Baz -> info.baz
   in
      column [ alignTop, paddingXY 20 5, width fill ] 
           [ paragraph [] [ el [] ( text currentCategory.first ) ]
           , paragraph [] [ el [] ( text currentCategory.second ) ]
           , paragraph [] [ el [] ( text currentCategory.third ) ]
           ] 

main = 
    Element.layout [ ] <|
        (Element.column
            [ width fill, spacing 10, Background.color (rgba255 200 200 200 1) ]
            [ (headerBox
                myInfo.title
              )
            , (Element.wrappedRow [ height fill
                                  , paddingEach { top = 10, left = 20, right = 20, bottom = 10 }
                                  , spacing 10
                                  , centerX ] 
                                  
                                  [ (card "Foo" Foo)
                                  , (card "Bar" Bar)
                                  , (card "Baz" Baz )
                                  ]
              )
            ]
        )

[trodrigu]

Hello,
Good work on creating this card layout. For your alignment problem are you referring to the padding on the headline of the cards? If so than maybe copying over the paddingXY from the column to the headerBox row might make the headlines align? link

[stevensonmt]

Thanks. The headlines aligned correctly, but the first line of the text was not aligned top. I fixed it by adding height fill to the column wrapping the text.
working correctly now