Untitled

dabblet.css

.userContent {
   padding: 0 5px;
   width: 230px;
   animation: myfirst 1s;
   background: limegreen;
   height: 40px;
   line-height:40px;
   float:left;
   }

.arrow-right {
   animation: myfirst 1s;
   float:left;
   width: 0;
   height: 0;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   border-left: 20px solid limegreen;
}
.tablecontent {
   margin: 0 7px;
   border: 2px solid limegreen;
   padding: 2px 3px;
   width: 50%;
   box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.17);
}
.user {
   animation: myfirst 1s;
}

@keyframes myfirst {
  from { width: 0px; opacity: 0; }
  to   { width: 230px; opacity: 1;}
}

body {
  padding: 20px;
}
* { margin: 0; padding: 0; }

dabblet.html

<div class="userContent"><p class="user">Username here</p></div>
<div class="arrow-right"></div>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}