Layout a flex box similar to a table?

Question

I\'m working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with

Answer 1

This code works for me:

        * {
            box-sizing: border-box;
        }


        body, html {
            height: 100%;
            margin: 0;
        }


        #container {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: lightgrey;
            padding: 10px;

        }


        .shelf {

            flex: 1 1 auto;
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid black;
            background-color: lightgreen;

            display: flex;
            flex-direction: row;

        }
        .shelf:last-child {
            margin-bottom: 0;
        }


        .labelbox {
            flex: 0 0 35%;
        }


        .valuebox {
            flex: 0 0 65%;
        }

    

        
Name: 
 
Barry Carter
    

    

        
DOB:
10/12/1980
    

    


        

            Description:
        

        


            This content goes on and on and will force the height to expand. And the label box to the left will
            "move" with it. There need not be much of a relation other than that their parent div/flex-container is
            getting taller as well.

        

    

    

        
Group:
Advanced
    

    

        
End Date:
2020-09-20