How do I display a proof tree with HTML,CSS and/or Javascript?

Question

I want to display a proof tree in the style of a natural deduction within a web page. I will get the data from a JSON file.

Whats the best way to display something like this? Is it possible only with css? Or is there a library that can do something like this? Rendering as an image is not possible, because eventually it should be interactive. I should also mention that this tree can get fairly large.

Example:

Update: A better example of what the end result should look like:

Answer 1

So after much fiddling with css, I used tables to get a satisfactory result. Since the layout is indeed part of the semantics, I think its acceptable in this case.

A small example would look like this:

<table>
    <tr>
        <td>
        </td>
        <td class="rulename" rowspan="2"><div class="rulename">add</div></td></tr>
    <tr><td class="conc">conclusion</td></tr>
</table>

And the css:

td {
 text-align:center;
 height: 1em;
 vertical-align:bottom;
}
td.conc {
 border-top: solid 1px;
}
div.rulename {
 margin-top:-2em;
}

Bigger demo