JSFiddle - React, Tailwind, and code Playground

HTML

<h1>float_left only</h1>
<div id="content" class="first"><ul><li class="toggle"><a title="Welcome" class="left">Welcome</a><span class="right float_right">1</span><ul style="display: none;"><li class="space_left"><a title="Runter" href="index.php?parameter=admin/down/articles/1" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=home/welcome" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/1" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/1" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/1" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="comment-test" class="left">comment-test</a><span class="right float_right">2</span><ul style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/41" class="up">Hoch</a> • <a title="Runter" href="index.php?parameter=admin/down/articles/41" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=comment-test" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/41" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/41" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/41" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="gallery" class="left">gallery</a> (English)<span class="right float_right">3</span><ul style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/43" class="up">Hoch</a> • <a title="Anzeigen" href="index.php?parameter=gallery" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/43" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen"...

CSS

* {
    border: 0;
    color: #333;
    font: 100 11px 'trebuchet ms';
    list-style: none;
    margin: auto;
    outline-style: none;
    padding: 0;
    text-align: left;
}

h1 {font-size:16px; margin-bottom:10px;}

div {
    overflow: hidden;
}

.space_bottom, .space_vertical {
    margin-bottom: 10px;
}

.space_left, .space_horizontal  {
    margin-left: 10px;
}

.space_right, .space_horizontal {
    margin-right: 10px;
}

.space_top, .space_vertical {
    margin-top: 10px;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.first li {background:green;}
.second li {background:red;}

JavaScript

$(document).ready(function() {
    $('li.toggle ul,fieldset.toggle ul').hide();
    $('li.toggle a,fieldset.toggle legend').click(function() {
        $(this).parent().siblings().children('.toggle ul').hide();
        $(this).siblings('ul').toggle();
    });
});