Display property - Block behavior with inline width

Question

I'm trying to get the "block" display affect with the AccordionPane so that the panes align vertically with spacing. But using display:block; will stretch the header of the pane to fit the full available width. Using display:inline; will get me the width behavior I desire, but then will stack the panes horizontally with no spacing.

For example, "Basic Info" is an unselected pane with display: block;. I want the width of the pane "Features" which has display: inline;

However, doing so results in the following:

Not only are the unselected panels smushed together horizontally, the tops are also cutoff from the Content pane.

I would like all of the panels to have width fit to the contents, but stack vertically with the clean spacing seen for display: block;. Is this possible?

Here is the aspx snippet:

<ajaxToolkit:Accordion
                     ClientIDMode="Static"
                     runat="server"
                     AutoSize="None"
                     Height="500"
                     ContentCssClass="accordion"
                     HeaderCssClass="accordionHeader"
                     HeaderSelectedCssClass="accordionHeaderSelected"
                     BorderStyle="None"
                     style="outline: none; vertical-align: top;"
                   >

Answer 1

To get this behavior I needed to set it to display: table;