how to place "dd" tag side by side html-CodePudding

I want to place "Age" and "Gender" side by side. How to place it. How to place dl tag side by side. I tried using display:flex, display:inline, but still not working.

dl {
    margin-bottom:50px;
}
 
dl dt {
    background:#5f9be3;
    color:#fff;
    float:left; 
    font-weight:bold; 
    margin-right:10px; 
    padding:5px;  
    width:100px; 
}
 
dl dd {
    margin:2px 0; 
    padding:5px 0;
}

    <dl>          
    <dt>Name: </dt>
    <dd>John Don</dd>
             
    <dt>Age: </dt>
    <dd>23</dd>
                 
    <dt>Gender: </dt>
    <dd>Male</dd>
                 
    <dt>Day of Birth:</dt>
    <dd>12th May 1986</dd>
</dl>

CodePudding user response：

You can insert a collapsed row in a flex item to make a new row, as described in this blog post.

dl {
    margin-bottom:50px;
    display: flex;
    flex-wrap: wrap;
}
 
dl dt {
    background:#5f9be3;
    color:#fff;
    float:left; 
    font-weight:bold; 
    margin-right:10px; 
    padding:5px;  
    width:100px; 
}
 
dl dd {
    margin:2px 10px 0 0; 
    padding:5px 0;
}

.break {
  flex-basis: 100%;
  height: 0;
  padding: 2px;
}

<dl>          
    <dt>Name: </dt>
    <dd>John Don</dd>

    <div ></div> <!-- break -->

    <dt>Age: </dt>
    <dd>23</dd>
                 
    <dt>Gender: </dt>
    <dd>Male</dd>

    <div ></div> <!-- break -->    

    <dt>Day of Birth:</dt>
    <dd>12th May 1986</dd>
</dl>

I added padding to the .break elements to space out the rows, and a right margin of 10px on the dl dd CSS rule to add some space between the two items on the same row.