.row {
display: flex;
justify-content: flex-end;
}
.row.row-start {
justify-content: flex-start;
}
.row .box {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
height: 200px;
background: grey;
text-align: center;
}
p {
display: inline-block;
border-bottom: 1px solid #000;
position: relative;
margin-left: 30px
}
p::before {
content: '123';
position: absolute;
left: -30px
}
p {
display: inline-block;
border-bottom: 1px solid #000;
margin-left: 30px;
}
p::before {
content: '123';
margin-left: -30px;
}
.object {
position: absolute;
left: -100px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.object.active {
left: 0;
}