HOW TO KEEP HTML ELEMENTS ON THE SAME LINE

[{"selector":"#anim-9f54f534-a859-4cac-8210-c862bcd75c89","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4a269439-efc8-458e-a5db-fae543a25e5f","keyframes":{"transform":["translate3d(0px, 178.93040%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9bc90765-abec-4e92-ae9b-3483f9267cbe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc0be19a-68a5-4b06-af04-2939b553313b","keyframes":{"transform":["translate3d(0px, -756.17314%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

CSS FLEX LAYOUT

[{"selector":"#anim-5d6118e1-81cc-4e1f-b5ae-e9383a67699a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0570a2b6-30a5-4a39-9941-a05b78447d80","keyframes":{"transform":["translate3d(-115.25974%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-52ca63a3-04f9-491d-82a9-227cbfaa8f5a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63ee38a3-af64-4191-a405-0061fb463a88","keyframes":{"transform":["translate3d(115.60510%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <div class="wrap-flex"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div> .wrap-flex { display: flex; width: 100%; } 01

CSS GRID LAYOUT

[{"selector":"#anim-74f6c6d4-12e8-4511-a370-616a62cc01ae","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d837031c-bb0f-4743-b0ab-c3da0e97da6b","keyframes":{"transform":["translate3d(120.13201%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7c9ecfcb-4b95-4b8a-8773-ed4029d32893","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c9da2387-a200-49f7-8aaa-434a3810ffdd","keyframes":{"transform":["translate3d(0px, 243.58308%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] .wrap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } 02 <div class="wrap-grid"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div>

DISPLAY AS TABLE

[{"selector":"#anim-c80f8f28-4d88-4381-9437-c06c20b0a10a","keyframes":{"transform":["translate3d(-115.84159%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-1ab57c21-3f8f-4e68-b9db-52697d448b22","keyframes":{"transform":["rotateZ(-180deg)","rotateZ(0deg)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-fbf5c2c5-5d83-407c-8076-c04478c2f339","keyframes":{"transform":["translate3d(115.97445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-abaf9501-a706-4547-bd1e-ccc16911ef43","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] .wrap-table { display: table; } .wrap-table > * { display: table-cell; } 03 <div class="wrap-table"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div>

FLOATING CONTAINERS

[{"selector":"#anim-d0b3edae-670a-45cf-a593-ae362ae8ef48","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3b213f9a-5ca0-422e-b47e-532302aa05e3","keyframes":{"transform":["translate3d(-115.51156%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74717ce6-9020-4db7-8156-567bf15e0388","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-38a298dc-2245-4e09-97b9-5d303ebdc3c6","keyframes":{"transform":["translate3d(115.87301%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-63887a03-923d-46bf-858a-0bebc4f0968f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-10069b99-3afd-43ad-94bc-cde27fdfb80f","keyframes":{"transform":["translate3d(0px, 410.87963%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] CLEARFIX .wrap-float { overflow: auto; width: 100%; } .wrap-float::after { content: ""; clear: both; display: table; } 04 <div class="wrap-float"> <p>Foo.</p> <span>Bar.</span> <img src="img.jpg"/> </div> FLOAT ITEMS .wrap-float > * { display: block; float: left; }

INLINE BLOCK

[{"selector":"#anim-dffcae25-81b2-4703-93b6-d24a08a74118","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-41e51903-80c7-443b-9296-106c07e4efc5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc8b46bd-c182-4993-9930-7dbfa366d58d","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-8f9c83a4-161d-4706-a59f-bdcdc6a23e36","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-116ceff4-8bcb-4459-9f35-419564e40873","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-73200feb-ca06-48bf-81bd-360f51efdd66","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] <div class="wrap-iblock"> <p>Foo.</p><span>Bar.</span><img src="img.jpg"/> </div> .wrap-iblock > * { display: inline-block; } 05

FULL TUTORIAL

[{"selector":"#anim-b1b6cd9c-cf5b-48fe-961b-9a7f24461bfa","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-135e5800-fe83-45c6-995a-c94493a179f0","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-933d6b9d-0ba8-403e-bf8a-f6b1f5617292","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]