<div class="row">
  <div class="small-11 columns text-center">
    <!-- Draw the tabs on top. They don't actually contain anything but their title -->
    <div class="row">
      <dl class="tabs" data-tab=true>
        <dd class="tab-title" ng-repeat="tab in exercise.tabs" ng-class="{active: exercise.currentTab === tab.tabNumber}" ng-click="exercise.switchToTab(tab)">
          <a href="">{{tab.name}}</a>
        </dd>
      </dl>
    </div>
    <!-- The Drawing Area is always the same; its content is changed programatically -->
    <div ng-class="{ hide: exercise.worldKind === 'logs' }" id="drawingArea" style="width: 400px;height: 400px"/>
    <div ng-class="{ hide: exercise.worldKind !== 'logs' }" class="with-newlines" style="width: 400px;height: 550px">{{exercise.result}}</div>
    <!-- TODO: Re-implement the CommonError feedback -->
    <!-- The buttons under the player -->
    <animation-player ng-show="exercise.animationPlayerNeeded"></animation-player>
    <animation-speed ng-show="exercise.animationPlayerNeeded"></animation-speed>
  </div>
</div>
<div class="row">
  <div class="small-11 columns text-center">
    <!-- Draw the tabs on top. They don't actually contain anything but their title -->
    <div class="row">
      <dl class="tabs" data-tab=true>
        <dd class="tab-title" ng-repeat="tab in exercise.tabs" ng-class="{active: exercise.currentTab === tab.tabNumber}" ng-click="exercise.switchToTab(tab)">
          <a href="">{{tab.name}}</a>
        </dd>
      </dl>
    </div>
    <!-- The Drawing Area is always the same; its content is changed programatically -->
    <div style="display: flex">
      <div ng-class="{ hide: exercise.worldKind === 'logs' }" id="drawingArea" style="width: 400px;height: 400px"/>
      <div ng-class="{ hide: exercise.worldKind !== 'logs' }" class="with-newlines" style="width: 400px;height: 550px">{{exercise.result}}</div>
      <!-- To the right of the drawing area comes the world selectors -->
      <div style="display: flex; flex-direction: column;">
        <ul class="button-group" ng-repeat="world in exercise.initialWorlds">
          <li ng-click="exercise.setCurrentWorld(world.id, exercise.worldKind);">
            <a ng-class="{ alert: exercise.resultType === 0, success: exercise.resultType === 1 }" class="button">{{ world.id }}</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- TODO: Re-implement the CommonError feedback -->
    <!-- The buttons under the player -->
    <animation-player ng-show="exercise.animationPlayerNeeded"></animation-player>
    <animation-speed ng-show="exercise.animationPlayerNeeded"></animation-speed>
  </div>
</div>
Put the world selectors to the right of the world player
Put the world selectors to the right of the world player

The buttons are exactly the same as the ones in the "test cases"
section, and they are as broken as these ones. It will be fixed
later.
