CssLayout component positioning

i have two tabs help and Instructions , i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.

The css i am using to configure this:

    .v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
    float: right;
    display: inline;
    margin-left: 268px;
    margin-top: -18px;
    padding: 0 3px 2px 0;

line-height: 11px;

I don’t understand what you are trying to achieve.

Why not using Vaadin’s
or the
DetachedTabs add-on

Are you just trying to make the content of a CssLayout horizontal ?
If the latest, check
this post
it gives some pointers on how to do that.