Is there a valid way to wrap a dt and a dd with an HTML element?

Question

I wish HTML could do something semantically equivalent to this;

    
        
Some Thing
         


        

Answer 1

Here we are in 2018! CSS grid is well supported, and this offers yet another possible solution / workaround to the problem if the main goal is to control the positioning of the dt/dd...

HTML

    
Favorite food
    
Pizza

    
Favorite drink
    
Beer

CSS

dl {
    display: grid;
    grid-template-columns: min-content 1fr;
}

(You can tweak the values of grid-template-columns to match your specific design requirements.)

This doesn't "solve" the limitations of the spec, but I thought it helpful since you specifically mentioned concerns about semantic markup. As I mentioned above, there are limitations to what grid can do, but if the goal is to control the layout of the dt/dd I think this might be the most semantic way to do it that is still valid HTML.