Metadata Labels - Review use of `label` tag outside of form (viewMode)

[mheppler]

In the dataset summary section of the dataset pg, there are label tags used to display the metadata labels, but these are considered "orphaned form labels" by accessibility tools as they are outside of a form (see WAVE alerts for the dataset pg in screenshot below).

This can be easily fix by switching out those UI components to something more appropriate when the page is in viewMode and displays metadata labels. Another place you can find the label tag used outside of a form is in metadataFragment.xhtml which is used in both viewMode and editMode. The same fix can be applied here, but the dynamic nature of the code will be a challenge, to find a solution for both workflows.

[mheppler]

While on the MDN Web Docs I happened to stumble upon a perfect example of a suitable solution to the viewMode layout of dataset metadata labels and values.

This was discovered after reviewing the discussion on the Stack Overflow question What html markups to use for displaying label/value data? Lots of good points in there, and while no one really convinced me one way or another, the "why not tables?" side of the debate really gained some credence when I saw it applied in the pixels on the MDN Web Docs site.

[mheppler]

Converted all the labels and divs to tables, row and cells in the dataset summary and metadata block sections. Everything looks pretty darn close to the original -- within a few pixels at least.

Also, made sure that the responsive layout for extra-small (under 768px) viewports still looks good. Had to put some custom CSS into structure.css since we are no longer getting that functionality from the Bootstrap grid system.