diff --git a/swan-lake/by-example/access-json-elements/content.jsx b/swan-lake/by-example/access-json-elements/content.jsx
index 4b3cfb471a8..ee88a4e1c07 100644
--- a/swan-lake/by-example/access-json-elements/content.jsx
+++ b/swan-lake/by-example/access-json-elements/content.jsx
@@ -85,7 +85,7 @@ export function AccessJsonElements({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/access-json-elements",
diff --git a/swan-lake/by-example/access-optional-json-elements/content.jsx b/swan-lake/by-example/access-optional-json-elements/content.jsx
index b57bfbf61b4..b5dc9fd3e38 100644
--- a/swan-lake/by-example/access-optional-json-elements/content.jsx
+++ b/swan-lake/by-example/access-optional-json-elements/content.jsx
@@ -59,7 +59,7 @@ export function AccessOptionalJsonElements({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/access-optional-json-elements",
diff --git a/swan-lake/by-example/aggregation/content.jsx b/swan-lake/by-example/aggregation/content.jsx
index b09f648744f..6da49499bb4 100644
--- a/swan-lake/by-example/aggregation/content.jsx
+++ b/swan-lake/by-example/aggregation/content.jsx
@@ -81,7 +81,7 @@ export function Aggregation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/aggregation",
diff --git a/swan-lake/by-example/alternate-wait/content.jsx b/swan-lake/by-example/alternate-wait/content.jsx
index 8b722b3718d..5adb24823ae 100644
--- a/swan-lake/by-example/alternate-wait/content.jsx
+++ b/swan-lake/by-example/alternate-wait/content.jsx
@@ -65,7 +65,7 @@ export function AlternateWait({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/alternate-wait",
diff --git a/swan-lake/by-example/annotations/content.jsx b/swan-lake/by-example/annotations/content.jsx
index ba297725fe1..7831980f1f5 100644
--- a/swan-lake/by-example/annotations/content.jsx
+++ b/swan-lake/by-example/annotations/content.jsx
@@ -69,7 +69,7 @@ export function Annotations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/annotations",
diff --git a/swan-lake/by-example/anonymous-function/content.jsx b/swan-lake/by-example/anonymous-function/content.jsx
index ebedca1cd90..786a4de7190 100644
--- a/swan-lake/by-example/anonymous-function/content.jsx
+++ b/swan-lake/by-example/anonymous-function/content.jsx
@@ -59,7 +59,7 @@ export function AnonymousFunction({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/anonymous-function",
diff --git a/swan-lake/by-example/any-type/content.jsx b/swan-lake/by-example/any-type/content.jsx
index 422925497f4..943fed57a15 100644
--- a/swan-lake/by-example/any-type/content.jsx
+++ b/swan-lake/by-example/any-type/content.jsx
@@ -57,7 +57,7 @@ export function AnyType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/any-type",
diff --git a/swan-lake/by-example/anydata-type/content.jsx b/swan-lake/by-example/anydata-type/content.jsx
index c5d812cd7f3..74e8754d100 100644
--- a/swan-lake/by-example/anydata-type/content.jsx
+++ b/swan-lake/by-example/anydata-type/content.jsx
@@ -55,7 +55,7 @@ export function AnydataType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/anydata-type",
diff --git a/swan-lake/by-example/array-map-symmetry/content.jsx b/swan-lake/by-example/array-map-symmetry/content.jsx
index 8e58b9650b5..168c698da28 100644
--- a/swan-lake/by-example/array-map-symmetry/content.jsx
+++ b/swan-lake/by-example/array-map-symmetry/content.jsx
@@ -117,7 +117,7 @@ export function ArrayMapSymmetry({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/array-map-symmetry",
diff --git a/swan-lake/by-example/arrays/content.jsx b/swan-lake/by-example/arrays/content.jsx
index 367765aeae8..0e6c640241c 100644
--- a/swan-lake/by-example/arrays/content.jsx
+++ b/swan-lake/by-example/arrays/content.jsx
@@ -96,7 +96,7 @@ export function Arrays({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/arrays",
diff --git a/swan-lake/by-example/asynchronize-message-passing/content.jsx b/swan-lake/by-example/asynchronize-message-passing/content.jsx
index 8b907246b84..cfcc8b7d07f 100644
--- a/swan-lake/by-example/asynchronize-message-passing/content.jsx
+++ b/swan-lake/by-example/asynchronize-message-passing/content.jsx
@@ -60,7 +60,7 @@ export function AsynchronizeMessagePassing({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/asynchronize-message-passing",
diff --git a/swan-lake/by-example/asynchronous-function-calls/content.jsx b/swan-lake/by-example/asynchronous-function-calls/content.jsx
index 989753530d9..f144825711c 100644
--- a/swan-lake/by-example/asynchronous-function-calls/content.jsx
+++ b/swan-lake/by-example/asynchronous-function-calls/content.jsx
@@ -55,7 +55,7 @@ export function AsynchronousFunctionCalls({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/asynchronous-function-calls",
diff --git a/swan-lake/by-example/backtick-templates/content.jsx b/swan-lake/by-example/backtick-templates/content.jsx
index fa5ec114fa6..612d4f8f402 100644
--- a/swan-lake/by-example/backtick-templates/content.jsx
+++ b/swan-lake/by-example/backtick-templates/content.jsx
@@ -70,7 +70,7 @@ export function BacktickTemplates({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/backtick-templates",
diff --git a/swan-lake/by-example/binary-data/content.jsx b/swan-lake/by-example/binary-data/content.jsx
index 3afc7dbb492..dcf273163a8 100644
--- a/swan-lake/by-example/binary-data/content.jsx
+++ b/swan-lake/by-example/binary-data/content.jsx
@@ -47,7 +47,7 @@ export function BinaryData({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/binary-data",
diff --git a/swan-lake/by-example/binding-patterns-in-match-statement/content.jsx b/swan-lake/by-example/binding-patterns-in-match-statement/content.jsx
index 5af2eee01e7..76253aa701f 100644
--- a/swan-lake/by-example/binding-patterns-in-match-statement/content.jsx
+++ b/swan-lake/by-example/binding-patterns-in-match-statement/content.jsx
@@ -94,7 +94,7 @@ export function BindingPatternsInMatchStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/binding-patterns-in-match-statement",
diff --git a/swan-lake/by-example/binding-patterns/content.jsx b/swan-lake/by-example/binding-patterns/content.jsx
index 2ac78f7e9d3..938b3457a4b 100644
--- a/swan-lake/by-example/binding-patterns/content.jsx
+++ b/swan-lake/by-example/binding-patterns/content.jsx
@@ -52,7 +52,7 @@ export function BindingPatterns({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/binding-patterns",
diff --git a/swan-lake/by-example/boolean/content.jsx b/swan-lake/by-example/boolean/content.jsx
index ddb95dcb731..58adb1b5e33 100644
--- a/swan-lake/by-example/boolean/content.jsx
+++ b/swan-lake/by-example/boolean/content.jsx
@@ -48,7 +48,7 @@ export function Boolean({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/boolean",
diff --git a/swan-lake/by-example/break-statement/content.jsx b/swan-lake/by-example/break-statement/content.jsx
index 52dd243bee1..f6b1e112f3d 100644
--- a/swan-lake/by-example/break-statement/content.jsx
+++ b/swan-lake/by-example/break-statement/content.jsx
@@ -56,7 +56,7 @@ export function BreakStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/break-statement",
diff --git a/swan-lake/by-example/built-in-integer-subtypes/content.jsx b/swan-lake/by-example/built-in-integer-subtypes/content.jsx
index 18d19719fc1..4d7f72c8932 100644
--- a/swan-lake/by-example/built-in-integer-subtypes/content.jsx
+++ b/swan-lake/by-example/built-in-integer-subtypes/content.jsx
@@ -135,7 +135,7 @@ export function BuiltInIntegerSubtypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/built-in-integer-subtypes",
diff --git a/swan-lake/by-example/built-in-string-subtype/content.jsx b/swan-lake/by-example/built-in-string-subtype/content.jsx
index 395fcb034e1..cc11d2beb42 100644
--- a/swan-lake/by-example/built-in-string-subtype/content.jsx
+++ b/swan-lake/by-example/built-in-string-subtype/content.jsx
@@ -56,7 +56,7 @@ export function BuiltInStringSubtype({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/built-in-string-subtype",
diff --git a/swan-lake/by-example/cache-basics/content.jsx b/swan-lake/by-example/cache-basics/content.jsx
index dfa8bfbfc5f..38b8aaa9096 100644
--- a/swan-lake/by-example/cache-basics/content.jsx
+++ b/swan-lake/by-example/cache-basics/content.jsx
@@ -71,7 +71,7 @@ export function CacheBasics({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/cache-basics",
diff --git a/swan-lake/by-example/cache-invalidation/content.jsx b/swan-lake/by-example/cache-invalidation/content.jsx
index 71e95f20629..ad2d53343af 100644
--- a/swan-lake/by-example/cache-invalidation/content.jsx
+++ b/swan-lake/by-example/cache-invalidation/content.jsx
@@ -83,7 +83,7 @@ export function CacheInvalidation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/cache-invalidation",
diff --git a/swan-lake/by-example/casting-json-to-user-defined-type/content.jsx b/swan-lake/by-example/casting-json-to-user-defined-type/content.jsx
index 0aed5b144cf..6ad4b582337 100644
--- a/swan-lake/by-example/casting-json-to-user-defined-type/content.jsx
+++ b/swan-lake/by-example/casting-json-to-user-defined-type/content.jsx
@@ -70,7 +70,7 @@ export function CastingJsonToUserDefinedType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/casting-json-to-user-defined-type",
diff --git a/swan-lake/by-example/check-expression/content.jsx b/swan-lake/by-example/check-expression/content.jsx
index 9c4318c620b..58679d25d89 100644
--- a/swan-lake/by-example/check-expression/content.jsx
+++ b/swan-lake/by-example/check-expression/content.jsx
@@ -57,7 +57,7 @@ export function CheckExpression({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/check-expression",
diff --git a/swan-lake/by-example/check-semantics/content.jsx b/swan-lake/by-example/check-semantics/content.jsx
index b41ac96b81d..a6a9fb01c1a 100644
--- a/swan-lake/by-example/check-semantics/content.jsx
+++ b/swan-lake/by-example/check-semantics/content.jsx
@@ -80,7 +80,7 @@ export function CheckSemantics({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/check-semantics",
diff --git a/swan-lake/by-example/combining-isolated-functions-and-lock/content.jsx b/swan-lake/by-example/combining-isolated-functions-and-lock/content.jsx
index bdec187d85e..ac23d465253 100644
--- a/swan-lake/by-example/combining-isolated-functions-and-lock/content.jsx
+++ b/swan-lake/by-example/combining-isolated-functions-and-lock/content.jsx
@@ -98,7 +98,7 @@ export function CombiningIsolatedFunctionsAndLock({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/combining-isolated-functions-and-lock",
diff --git a/swan-lake/by-example/commit-rollback-handlers/content.jsx b/swan-lake/by-example/commit-rollback-handlers/content.jsx
index 6b015ed2470..99935213064 100644
--- a/swan-lake/by-example/commit-rollback-handlers/content.jsx
+++ b/swan-lake/by-example/commit-rollback-handlers/content.jsx
@@ -71,7 +71,7 @@ export function CommitRollbackHandlers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/commit-rollback-handlers",
diff --git a/swan-lake/by-example/computed-field-key/content.jsx b/swan-lake/by-example/computed-field-key/content.jsx
index 4e03f9e7108..8f4f8fc6aea 100644
--- a/swan-lake/by-example/computed-field-key/content.jsx
+++ b/swan-lake/by-example/computed-field-key/content.jsx
@@ -59,7 +59,7 @@ export function ComputedFieldKey({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/computed-field-key",
diff --git a/swan-lake/by-example/const-and-final/content.jsx b/swan-lake/by-example/const-and-final/content.jsx
index 36796353da5..8f070140a67 100644
--- a/swan-lake/by-example/const-and-final/content.jsx
+++ b/swan-lake/by-example/const-and-final/content.jsx
@@ -59,7 +59,7 @@ export function ConstAndFinal({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/const-and-final",
diff --git a/swan-lake/by-example/constraint-validations/content.jsx b/swan-lake/by-example/constraint-validations/content.jsx
index fab3b792cb8..ad246c861c8 100644
--- a/swan-lake/by-example/constraint-validations/content.jsx
+++ b/swan-lake/by-example/constraint-validations/content.jsx
@@ -90,7 +90,7 @@ export function ConstraintValidations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/constraint-validations",
diff --git a/swan-lake/by-example/consuming-services/content.jsx b/swan-lake/by-example/consuming-services/content.jsx
index 5d3b586673d..438c13d2d2f 100644
--- a/swan-lake/by-example/consuming-services/content.jsx
+++ b/swan-lake/by-example/consuming-services/content.jsx
@@ -51,7 +51,7 @@ export function ConsumingServices({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/consuming-services",
diff --git a/swan-lake/by-example/continue-statement/content.jsx b/swan-lake/by-example/continue-statement/content.jsx
index f3d9d04911d..3aaa589023c 100644
--- a/swan-lake/by-example/continue-statement/content.jsx
+++ b/swan-lake/by-example/continue-statement/content.jsx
@@ -57,7 +57,7 @@ export function ContinueStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/continue-statement",
diff --git a/swan-lake/by-example/controlling-openness/content.jsx b/swan-lake/by-example/controlling-openness/content.jsx
index 312c793898b..b5ae6400f79 100644
--- a/swan-lake/by-example/controlling-openness/content.jsx
+++ b/swan-lake/by-example/controlling-openness/content.jsx
@@ -72,7 +72,7 @@ export function ControllingOpenness({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/controlling-openness",
diff --git a/swan-lake/by-example/convert-from-json-to-user-defined-type/content.jsx b/swan-lake/by-example/convert-from-json-to-user-defined-type/content.jsx
index e30fca0643a..64e8be2059a 100644
--- a/swan-lake/by-example/convert-from-json-to-user-defined-type/content.jsx
+++ b/swan-lake/by-example/convert-from-json-to-user-defined-type/content.jsx
@@ -79,7 +79,7 @@ export function ConvertFromJsonToUserDefinedType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/convert-from-json-to-user-defined-type",
diff --git a/swan-lake/by-example/converting-from-table-and-xml-to-json/content.jsx b/swan-lake/by-example/converting-from-table-and-xml-to-json/content.jsx
index 79bbce65e1b..22490effad0 100644
--- a/swan-lake/by-example/converting-from-table-and-xml-to-json/content.jsx
+++ b/swan-lake/by-example/converting-from-table-and-xml-to-json/content.jsx
@@ -50,7 +50,7 @@ export function ConvertingFromTableAndXmlToJson({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/converting-from-table-and-xml-to-json",
diff --git a/swan-lake/by-example/converting-from-user-defined-type-to-json/content.jsx b/swan-lake/by-example/converting-from-user-defined-type-to-json/content.jsx
index 43ac5a0db01..7edc209d19f 100644
--- a/swan-lake/by-example/converting-from-user-defined-type-to-json/content.jsx
+++ b/swan-lake/by-example/converting-from-user-defined-type-to-json/content.jsx
@@ -69,7 +69,7 @@ export function ConvertingFromUserDefinedTypeToJson({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/converting-from-user-defined-type-to-json",
diff --git a/swan-lake/by-example/covariance/content.jsx b/swan-lake/by-example/covariance/content.jsx
index f21d58070cc..ccf4446ee27 100644
--- a/swan-lake/by-example/covariance/content.jsx
+++ b/swan-lake/by-example/covariance/content.jsx
@@ -50,7 +50,7 @@ export function Covariance({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/covariance",
diff --git a/swan-lake/by-example/create-maps-with-query/content.jsx b/swan-lake/by-example/create-maps-with-query/content.jsx
index 918ceadab1d..2366ab53990 100644
--- a/swan-lake/by-example/create-maps-with-query/content.jsx
+++ b/swan-lake/by-example/create-maps-with-query/content.jsx
@@ -63,7 +63,7 @@ export function CreateMapsWithQuery({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/create-maps-with-query",
diff --git a/swan-lake/by-example/create-streams-with-query/content.jsx b/swan-lake/by-example/create-streams-with-query/content.jsx
index b9992502e68..70a86a6a35a 100644
--- a/swan-lake/by-example/create-streams-with-query/content.jsx
+++ b/swan-lake/by-example/create-streams-with-query/content.jsx
@@ -66,7 +66,7 @@ export function CreateStreamsWithQuery({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/create-streams-with-query",
diff --git a/swan-lake/by-example/create-tables-with-query/content.jsx b/swan-lake/by-example/create-tables-with-query/content.jsx
index c1fbabd9003..0b63e54b99b 100644
--- a/swan-lake/by-example/create-tables-with-query/content.jsx
+++ b/swan-lake/by-example/create-tables-with-query/content.jsx
@@ -66,7 +66,7 @@ export function CreateTablesWithQuery({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/create-tables-with-query",
diff --git a/swan-lake/by-example/decimal-type/content.jsx b/swan-lake/by-example/decimal-type/content.jsx
index d44be099a9a..6a46545527c 100644
--- a/swan-lake/by-example/decimal-type/content.jsx
+++ b/swan-lake/by-example/decimal-type/content.jsx
@@ -60,7 +60,7 @@ export function DecimalType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/decimal-type",
diff --git a/swan-lake/by-example/default-values-for-function-parameters/content.jsx b/swan-lake/by-example/default-values-for-function-parameters/content.jsx
index acc76af14cc..869e021082b 100644
--- a/swan-lake/by-example/default-values-for-function-parameters/content.jsx
+++ b/swan-lake/by-example/default-values-for-function-parameters/content.jsx
@@ -51,7 +51,7 @@ export function DefaultValuesForFunctionParameters({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/default-values-for-function-parameters",
diff --git a/swan-lake/by-example/default-values-for-record-fields/content.jsx b/swan-lake/by-example/default-values-for-record-fields/content.jsx
index c2babd21593..b7cb18012be 100644
--- a/swan-lake/by-example/default-values-for-record-fields/content.jsx
+++ b/swan-lake/by-example/default-values-for-record-fields/content.jsx
@@ -67,7 +67,7 @@ export function DefaultValuesForRecordFields({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/default-values-for-record-fields",
diff --git a/swan-lake/by-example/defining-classes/content.jsx b/swan-lake/by-example/defining-classes/content.jsx
index 203d01a6d3d..c816dce1213 100644
--- a/swan-lake/by-example/defining-classes/content.jsx
+++ b/swan-lake/by-example/defining-classes/content.jsx
@@ -73,7 +73,7 @@ export function DefiningClasses({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/defining-classes",
diff --git a/swan-lake/by-example/dependent-types/content.jsx b/swan-lake/by-example/dependent-types/content.jsx
index b4235c83b5d..bf6f93cf899 100644
--- a/swan-lake/by-example/dependent-types/content.jsx
+++ b/swan-lake/by-example/dependent-types/content.jsx
@@ -55,7 +55,7 @@ export function DependentTypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/dependent-types",
diff --git a/swan-lake/by-example/destructure-records-using-query/content.jsx b/swan-lake/by-example/destructure-records-using-query/content.jsx
index 3919bed8d44..566fed6e446 100644
--- a/swan-lake/by-example/destructure-records-using-query/content.jsx
+++ b/swan-lake/by-example/destructure-records-using-query/content.jsx
@@ -70,7 +70,7 @@ export function DestructureRecordsUsingQuery({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/destructure-records-using-query",
diff --git a/swan-lake/by-example/directories/content.jsx b/swan-lake/by-example/directories/content.jsx
index 58a6b9bb759..9b0b72debb0 100644
--- a/swan-lake/by-example/directories/content.jsx
+++ b/swan-lake/by-example/directories/content.jsx
@@ -76,7 +76,7 @@ export function Directories({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/directories",
diff --git a/swan-lake/by-example/distinct-object-types/content.jsx b/swan-lake/by-example/distinct-object-types/content.jsx
index 53c0000a102..4735592b93f 100644
--- a/swan-lake/by-example/distinct-object-types/content.jsx
+++ b/swan-lake/by-example/distinct-object-types/content.jsx
@@ -71,7 +71,7 @@ export function DistinctObjectTypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/distinct-object-types",
diff --git a/swan-lake/by-example/documentation/content.jsx b/swan-lake/by-example/documentation/content.jsx
index 008eb8554f6..258b80b4d70 100644
--- a/swan-lake/by-example/documentation/content.jsx
+++ b/swan-lake/by-example/documentation/content.jsx
@@ -44,7 +44,7 @@ export function Documentation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/documentation",
diff --git a/swan-lake/by-example/edi-to-record/content.jsx b/swan-lake/by-example/edi-to-record/content.jsx
index f0345990681..e3c76bc4a44 100644
--- a/swan-lake/by-example/edi-to-record/content.jsx
+++ b/swan-lake/by-example/edi-to-record/content.jsx
@@ -98,7 +98,7 @@ export function EdiToRecord({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/edi-to-record",
@@ -186,7 +186,7 @@ export function EdiToRecord({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/edi-to-record",
@@ -276,7 +276,7 @@ export function EdiToRecord({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/edi-to-record",
@@ -576,7 +576,7 @@ export function EdiToRecord({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/edi-to-record",
diff --git a/swan-lake/by-example/ensureType-function/content.jsx b/swan-lake/by-example/ensureType-function/content.jsx
index 13a135ed15c..25a0a02d2c2 100644
--- a/swan-lake/by-example/ensureType-function/content.jsx
+++ b/swan-lake/by-example/ensureType-function/content.jsx
@@ -51,7 +51,7 @@ export function EnsureTypeFunction({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/ensureType-function",
diff --git a/swan-lake/by-example/enumerations/content.jsx b/swan-lake/by-example/enumerations/content.jsx
index e89faca76fd..3105d0bcd45 100644
--- a/swan-lake/by-example/enumerations/content.jsx
+++ b/swan-lake/by-example/enumerations/content.jsx
@@ -58,7 +58,7 @@ export function Enumerations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/enumerations",
diff --git a/swan-lake/by-example/environment-variables/content.jsx b/swan-lake/by-example/environment-variables/content.jsx
index 415f985b976..8f018dadba8 100644
--- a/swan-lake/by-example/environment-variables/content.jsx
+++ b/swan-lake/by-example/environment-variables/content.jsx
@@ -56,7 +56,7 @@ export function EnvironmentVariables({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/environment-variables",
diff --git a/swan-lake/by-example/error-binding-pattern-in-match-statement/content.jsx b/swan-lake/by-example/error-binding-pattern-in-match-statement/content.jsx
index 186d774c5bf..01ba4169274 100644
--- a/swan-lake/by-example/error-binding-pattern-in-match-statement/content.jsx
+++ b/swan-lake/by-example/error-binding-pattern-in-match-statement/content.jsx
@@ -85,7 +85,7 @@ export function ErrorBindingPatternInMatchStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-binding-pattern-in-match-statement",
diff --git a/swan-lake/by-example/error-binding-pattern/content.jsx b/swan-lake/by-example/error-binding-pattern/content.jsx
index 3c7a2711ccf..0e13c99dc75 100644
--- a/swan-lake/by-example/error-binding-pattern/content.jsx
+++ b/swan-lake/by-example/error-binding-pattern/content.jsx
@@ -72,7 +72,7 @@ export function ErrorBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-binding-pattern",
diff --git a/swan-lake/by-example/error-cause/content.jsx b/swan-lake/by-example/error-cause/content.jsx
index 0e700cadac9..a4dd56dcd9a 100644
--- a/swan-lake/by-example/error-cause/content.jsx
+++ b/swan-lake/by-example/error-cause/content.jsx
@@ -57,7 +57,7 @@ export function ErrorCause({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-cause",
diff --git a/swan-lake/by-example/error-detail/content.jsx b/swan-lake/by-example/error-detail/content.jsx
index f4916a09957..c9920cdb066 100644
--- a/swan-lake/by-example/error-detail/content.jsx
+++ b/swan-lake/by-example/error-detail/content.jsx
@@ -57,7 +57,7 @@ export function ErrorDetail({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-detail",
diff --git a/swan-lake/by-example/error-handling/content.jsx b/swan-lake/by-example/error-handling/content.jsx
index 25135534513..b1e7fce24d1 100644
--- a/swan-lake/by-example/error-handling/content.jsx
+++ b/swan-lake/by-example/error-handling/content.jsx
@@ -61,7 +61,7 @@ export function ErrorHandling({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-handling",
diff --git a/swan-lake/by-example/error-reporting/content.jsx b/swan-lake/by-example/error-reporting/content.jsx
index 55df4dd7e52..f03283f4f75 100644
--- a/swan-lake/by-example/error-reporting/content.jsx
+++ b/swan-lake/by-example/error-reporting/content.jsx
@@ -76,7 +76,7 @@ export function ErrorReporting({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-reporting",
diff --git a/swan-lake/by-example/error-subtyping/content.jsx b/swan-lake/by-example/error-subtyping/content.jsx
index 15f008116d3..126fb7e006f 100644
--- a/swan-lake/by-example/error-subtyping/content.jsx
+++ b/swan-lake/by-example/error-subtyping/content.jsx
@@ -61,7 +61,7 @@ export function ErrorSubtyping({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-subtyping",
diff --git a/swan-lake/by-example/error-type-intersection/content.jsx b/swan-lake/by-example/error-type-intersection/content.jsx
index 33cc660115c..b8a2314cca3 100644
--- a/swan-lake/by-example/error-type-intersection/content.jsx
+++ b/swan-lake/by-example/error-type-intersection/content.jsx
@@ -66,7 +66,7 @@ export function ErrorTypeIntersection({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/error-type-intersection",
diff --git a/swan-lake/by-example/expression-oriented-style/content.jsx b/swan-lake/by-example/expression-oriented-style/content.jsx
index 8bf42b2eb38..ce418b4e837 100644
--- a/swan-lake/by-example/expression-oriented-style/content.jsx
+++ b/swan-lake/by-example/expression-oriented-style/content.jsx
@@ -69,7 +69,7 @@ export function ExpressionOrientedStyle({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/expression-oriented-style",
diff --git a/swan-lake/by-example/filepaths/content.jsx b/swan-lake/by-example/filepaths/content.jsx
index 41baa72e834..6a7861f9d52 100644
--- a/swan-lake/by-example/filepaths/content.jsx
+++ b/swan-lake/by-example/filepaths/content.jsx
@@ -76,7 +76,7 @@ export function Filepaths({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/filepaths",
diff --git a/swan-lake/by-example/files/content.jsx b/swan-lake/by-example/files/content.jsx
index c091714bb85..aaeb45a76e6 100644
--- a/swan-lake/by-example/files/content.jsx
+++ b/swan-lake/by-example/files/content.jsx
@@ -80,7 +80,7 @@ export function Files({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/files",
diff --git a/swan-lake/by-example/filler-values-of-a-list/content.jsx b/swan-lake/by-example/filler-values-of-a-list/content.jsx
index a96993ca7a9..bca0fa3a2f2 100644
--- a/swan-lake/by-example/filler-values-of-a-list/content.jsx
+++ b/swan-lake/by-example/filler-values-of-a-list/content.jsx
@@ -57,7 +57,7 @@ export function FillerValuesOfAList({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/filler-values-of-a-list",
diff --git a/swan-lake/by-example/floating-point-numbers/content.jsx b/swan-lake/by-example/floating-point-numbers/content.jsx
index 0b97602667e..1224925cf06 100644
--- a/swan-lake/by-example/floating-point-numbers/content.jsx
+++ b/swan-lake/by-example/floating-point-numbers/content.jsx
@@ -51,7 +51,7 @@ export function FloatingPointNumbers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/floating-point-numbers",
diff --git a/swan-lake/by-example/flush/content.jsx b/swan-lake/by-example/flush/content.jsx
index 0202eb8acb4..117129f2717 100644
--- a/swan-lake/by-example/flush/content.jsx
+++ b/swan-lake/by-example/flush/content.jsx
@@ -64,7 +64,7 @@ export function Flush({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/flush",
diff --git a/swan-lake/by-example/foreach-statement/content.jsx b/swan-lake/by-example/foreach-statement/content.jsx
index d74eb70493e..c9416e71564 100644
--- a/swan-lake/by-example/foreach-statement/content.jsx
+++ b/swan-lake/by-example/foreach-statement/content.jsx
@@ -70,7 +70,7 @@ export function ForeachStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/foreach-statement",
diff --git a/swan-lake/by-example/function-closure/content.jsx b/swan-lake/by-example/function-closure/content.jsx
index 57df90e49e0..88cc66cae86 100644
--- a/swan-lake/by-example/function-closure/content.jsx
+++ b/swan-lake/by-example/function-closure/content.jsx
@@ -48,7 +48,7 @@ export function FunctionClosure({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/function-closure",
diff --git a/swan-lake/by-example/function-pointers/content.jsx b/swan-lake/by-example/function-pointers/content.jsx
index 44f23093728..ae4470647c5 100644
--- a/swan-lake/by-example/function-pointers/content.jsx
+++ b/swan-lake/by-example/function-pointers/content.jsx
@@ -61,7 +61,7 @@ export function FunctionPointers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/function-pointers",
diff --git a/swan-lake/by-example/function-types/content.jsx b/swan-lake/by-example/function-types/content.jsx
index 61bc33080e2..0dfc1d90754 100644
--- a/swan-lake/by-example/function-types/content.jsx
+++ b/swan-lake/by-example/function-types/content.jsx
@@ -73,7 +73,7 @@ export function FunctionTypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/function-types",
diff --git a/swan-lake/by-example/function-values/content.jsx b/swan-lake/by-example/function-values/content.jsx
index 94389b9f60f..c7c947c11fb 100644
--- a/swan-lake/by-example/function-values/content.jsx
+++ b/swan-lake/by-example/function-values/content.jsx
@@ -49,7 +49,7 @@ export function FunctionValues({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/function-values",
diff --git a/swan-lake/by-example/functions/content.jsx b/swan-lake/by-example/functions/content.jsx
index 947c986c7c8..d12c4b4cbb6 100644
--- a/swan-lake/by-example/functions/content.jsx
+++ b/swan-lake/by-example/functions/content.jsx
@@ -74,7 +74,7 @@ export function Functions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/functions",
diff --git a/swan-lake/by-example/hello-world/content.jsx b/swan-lake/by-example/hello-world/content.jsx
index a5df5ef3395..16a274bd7a4 100644
--- a/swan-lake/by-example/hello-world/content.jsx
+++ b/swan-lake/by-example/hello-world/content.jsx
@@ -36,7 +36,7 @@ export function HelloWorld({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/hello-world",
diff --git a/swan-lake/by-example/http-100-continue/content.jsx b/swan-lake/by-example/http-100-continue/content.jsx
index cd7a4e52308..167fdc3840e 100644
--- a/swan-lake/by-example/http-100-continue/content.jsx
+++ b/swan-lake/by-example/http-100-continue/content.jsx
@@ -73,7 +73,7 @@ export function Http100Continue({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-100-continue",
diff --git a/swan-lake/by-example/http-2-0-client-server-push/content.jsx b/swan-lake/by-example/http-2-0-client-server-push/content.jsx
index 2366c3e579c..1370c5f8f94 100644
--- a/swan-lake/by-example/http-2-0-client-server-push/content.jsx
+++ b/swan-lake/by-example/http-2-0-client-server-push/content.jsx
@@ -81,7 +81,7 @@ export function Http20ClientServerPush({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-2-0-client-server-push",
diff --git a/swan-lake/by-example/http-2-0-server-push/content.jsx b/swan-lake/by-example/http-2-0-server-push/content.jsx
index 3e026dc70af..08413a9fd07 100644
--- a/swan-lake/by-example/http-2-0-server-push/content.jsx
+++ b/swan-lake/by-example/http-2-0-server-push/content.jsx
@@ -87,7 +87,7 @@ export function Http20ServerPush({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-2-0-server-push",
diff --git a/swan-lake/by-example/http-2-prior-knowledge-client/content.jsx b/swan-lake/by-example/http-2-prior-knowledge-client/content.jsx
index 17883041974..1c1e39fd13c 100644
--- a/swan-lake/by-example/http-2-prior-knowledge-client/content.jsx
+++ b/swan-lake/by-example/http-2-prior-knowledge-client/content.jsx
@@ -51,7 +51,7 @@ export function Http2PriorKnowledgeClient({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-2-prior-knowledge-client",
diff --git a/swan-lake/by-example/http-2-to-1-1-downgrade-client/content.jsx b/swan-lake/by-example/http-2-to-1-1-downgrade-client/content.jsx
index fd57a4b32db..5b65fa54f42 100644
--- a/swan-lake/by-example/http-2-to-1-1-downgrade-client/content.jsx
+++ b/swan-lake/by-example/http-2-to-1-1-downgrade-client/content.jsx
@@ -51,7 +51,7 @@ export function Http2To11DowngradeClient({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-2-to-1-1-downgrade-client",
diff --git a/swan-lake/by-example/http-2-to-1-1-downgrade-service/content.jsx b/swan-lake/by-example/http-2-to-1-1-downgrade-service/content.jsx
index 130f812a3cf..b5067ade8b4 100644
--- a/swan-lake/by-example/http-2-to-1-1-downgrade-service/content.jsx
+++ b/swan-lake/by-example/http-2-to-1-1-downgrade-service/content.jsx
@@ -64,7 +64,7 @@ export function Http2To11DowngradeService({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-2-to-1-1-downgrade-service",
diff --git a/swan-lake/by-example/http-access-logs/content.jsx b/swan-lake/by-example/http-access-logs/content.jsx
index 50d8cfe2e0b..059bb314ebb 100644
--- a/swan-lake/by-example/http-access-logs/content.jsx
+++ b/swan-lake/by-example/http-access-logs/content.jsx
@@ -64,7 +64,7 @@ export function HttpAccessLogs({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-access-logs",
@@ -160,7 +160,7 @@ export function HttpAccessLogs({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-access-logs",
diff --git a/swan-lake/by-example/http-basic-rest-service/content.jsx b/swan-lake/by-example/http-basic-rest-service/content.jsx
index 2576f02cf6f..4a9833fe175 100644
--- a/swan-lake/by-example/http-basic-rest-service/content.jsx
+++ b/swan-lake/by-example/http-basic-rest-service/content.jsx
@@ -70,7 +70,7 @@ export function HttpBasicRestService({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-basic-rest-service",
diff --git a/swan-lake/by-example/http-caching-client/content.jsx b/swan-lake/by-example/http-caching-client/content.jsx
index 004e56719a6..f6dcdb0f344 100644
--- a/swan-lake/by-example/http-caching-client/content.jsx
+++ b/swan-lake/by-example/http-caching-client/content.jsx
@@ -60,7 +60,7 @@ export function HttpCachingClient({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-caching-client",
diff --git a/swan-lake/by-example/http-caller/content.jsx b/swan-lake/by-example/http-caller/content.jsx
index 0a97fa7d0b0..681c6ad980a 100644
--- a/swan-lake/by-example/http-caller/content.jsx
+++ b/swan-lake/by-example/http-caller/content.jsx
@@ -66,7 +66,7 @@ export function HttpCaller({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-caller",
diff --git a/swan-lake/by-example/http-circuit-breaker/content.jsx b/swan-lake/by-example/http-circuit-breaker/content.jsx
index ec5ee1247e2..a1386b260f6 100644
--- a/swan-lake/by-example/http-circuit-breaker/content.jsx
+++ b/swan-lake/by-example/http-circuit-breaker/content.jsx
@@ -78,7 +78,7 @@ export function HttpCircuitBreaker({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-circuit-breaker",
diff --git a/swan-lake/by-example/http-client-basic-authentication/content.jsx b/swan-lake/by-example/http-client-basic-authentication/content.jsx
index 3716a034ee0..72699bae1c5 100644
--- a/swan-lake/by-example/http-client-basic-authentication/content.jsx
+++ b/swan-lake/by-example/http-client-basic-authentication/content.jsx
@@ -57,7 +57,7 @@ export function HttpClientBasicAuthentication({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-basic-authentication",
diff --git a/swan-lake/by-example/http-client-bearer-token-authentication/content.jsx b/swan-lake/by-example/http-client-bearer-token-authentication/content.jsx
index aa1e9074ce3..219f48ef9f1 100644
--- a/swan-lake/by-example/http-client-bearer-token-authentication/content.jsx
+++ b/swan-lake/by-example/http-client-bearer-token-authentication/content.jsx
@@ -56,7 +56,7 @@ export function HttpClientBearerTokenAuthentication({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-bearer-token-authentication",
diff --git a/swan-lake/by-example/http-client-chunking/content.jsx b/swan-lake/by-example/http-client-chunking/content.jsx
index f4d569ab450..9cfba8d8027 100644
--- a/swan-lake/by-example/http-client-chunking/content.jsx
+++ b/swan-lake/by-example/http-client-chunking/content.jsx
@@ -60,7 +60,7 @@ export function HttpClientChunking({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-chunking",
diff --git a/swan-lake/by-example/http-client-data-binding/content.jsx b/swan-lake/by-example/http-client-data-binding/content.jsx
index c0a2ae2f5e4..c67a377cd0e 100644
--- a/swan-lake/by-example/http-client-data-binding/content.jsx
+++ b/swan-lake/by-example/http-client-data-binding/content.jsx
@@ -62,7 +62,7 @@ export function HttpClientDataBinding({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-data-binding",
diff --git a/swan-lake/by-example/http-client-file-upload/content.jsx b/swan-lake/by-example/http-client-file-upload/content.jsx
index f11ca7591c6..c0204d150eb 100644
--- a/swan-lake/by-example/http-client-file-upload/content.jsx
+++ b/swan-lake/by-example/http-client-file-upload/content.jsx
@@ -53,7 +53,7 @@ export function HttpClientFileUpload({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-file-upload",
diff --git a/swan-lake/by-example/http-client-header-parameter/content.jsx b/swan-lake/by-example/http-client-header-parameter/content.jsx
index 74eba70d8a5..75a488e7b6e 100644
--- a/swan-lake/by-example/http-client-header-parameter/content.jsx
+++ b/swan-lake/by-example/http-client-header-parameter/content.jsx
@@ -68,7 +68,7 @@ export function HttpClientHeaderParameter({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-header-parameter",
@@ -234,7 +234,7 @@ export function HttpClientHeaderParameter({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-header-parameter",
diff --git a/swan-lake/by-example/http-client-mutual-ssl/content.jsx b/swan-lake/by-example/http-client-mutual-ssl/content.jsx
index dd5d3d83dd7..381ea9d13aa 100644
--- a/swan-lake/by-example/http-client-mutual-ssl/content.jsx
+++ b/swan-lake/by-example/http-client-mutual-ssl/content.jsx
@@ -63,7 +63,7 @@ export function HttpClientMutualSsl({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-mutual-ssl",
diff --git a/swan-lake/by-example/http-client-oauth2-client-credentials-grant-type/content.jsx b/swan-lake/by-example/http-client-oauth2-client-credentials-grant-type/content.jsx
index 223d2c51f1a..1b35e1bda2b 100644
--- a/swan-lake/by-example/http-client-oauth2-client-credentials-grant-type/content.jsx
+++ b/swan-lake/by-example/http-client-oauth2-client-credentials-grant-type/content.jsx
@@ -64,7 +64,7 @@ export function HttpClientOauth2ClientCredentialsGrantType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-oauth2-client-credentials-grant-type",
diff --git a/swan-lake/by-example/http-client-oauth2-jwt-bearer-grant-type/content.jsx b/swan-lake/by-example/http-client-oauth2-jwt-bearer-grant-type/content.jsx
index 2ae8475f45a..39b0420ecda 100644
--- a/swan-lake/by-example/http-client-oauth2-jwt-bearer-grant-type/content.jsx
+++ b/swan-lake/by-example/http-client-oauth2-jwt-bearer-grant-type/content.jsx
@@ -65,7 +65,7 @@ export function HttpClientOauth2JwtBearerGrantType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-oauth2-jwt-bearer-grant-type",
diff --git a/swan-lake/by-example/http-client-oauth2-password-grant-type/content.jsx b/swan-lake/by-example/http-client-oauth2-password-grant-type/content.jsx
index 0fd70b02562..13f832c190d 100644
--- a/swan-lake/by-example/http-client-oauth2-password-grant-type/content.jsx
+++ b/swan-lake/by-example/http-client-oauth2-password-grant-type/content.jsx
@@ -69,7 +69,7 @@ export function HttpClientOauth2PasswordGrantType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-oauth2-password-grant-type",
diff --git a/swan-lake/by-example/http-client-oauth2-refresh-token-grant-type/content.jsx b/swan-lake/by-example/http-client-oauth2-refresh-token-grant-type/content.jsx
index 5ed09a34836..7a360b0fb85 100644
--- a/swan-lake/by-example/http-client-oauth2-refresh-token-grant-type/content.jsx
+++ b/swan-lake/by-example/http-client-oauth2-refresh-token-grant-type/content.jsx
@@ -66,7 +66,7 @@ export function HttpClientOauth2RefreshTokenGrantType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-oauth2-refresh-token-grant-type",
diff --git a/swan-lake/by-example/http-client-path-parameter/content.jsx b/swan-lake/by-example/http-client-path-parameter/content.jsx
index 1e8460bf5b0..63367c7c740 100644
--- a/swan-lake/by-example/http-client-path-parameter/content.jsx
+++ b/swan-lake/by-example/http-client-path-parameter/content.jsx
@@ -53,7 +53,7 @@ export function HttpClientPathParameter({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-path-parameter",
diff --git a/swan-lake/by-example/http-client-payload-constraint-validation/content.jsx b/swan-lake/by-example/http-client-payload-constraint-validation/content.jsx
index 8b39d4adbb1..fd0d0d80568 100644
--- a/swan-lake/by-example/http-client-payload-constraint-validation/content.jsx
+++ b/swan-lake/by-example/http-client-payload-constraint-validation/content.jsx
@@ -67,7 +67,7 @@ export function HttpClientPayloadConstraintValidation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-payload-constraint-validation",
diff --git a/swan-lake/by-example/http-client-query-parameter/content.jsx b/swan-lake/by-example/http-client-query-parameter/content.jsx
index 3e9d53d9c32..3dacc6235c0 100644
--- a/swan-lake/by-example/http-client-query-parameter/content.jsx
+++ b/swan-lake/by-example/http-client-query-parameter/content.jsx
@@ -65,7 +65,7 @@ export function HttpClientQueryParameter({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-query-parameter",
@@ -231,7 +231,7 @@ export function HttpClientQueryParameter({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-query-parameter",
diff --git a/swan-lake/by-example/http-client-redirects/content.jsx b/swan-lake/by-example/http-client-redirects/content.jsx
index 921438f1f31..c0d6c337351 100644
--- a/swan-lake/by-example/http-client-redirects/content.jsx
+++ b/swan-lake/by-example/http-client-redirects/content.jsx
@@ -55,7 +55,7 @@ export function HttpClientRedirects({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-redirects",
diff --git a/swan-lake/by-example/http-client-self-signed-jwt-authentication/content.jsx b/swan-lake/by-example/http-client-self-signed-jwt-authentication/content.jsx
index 0d84513a091..8a4afba7445 100644
--- a/swan-lake/by-example/http-client-self-signed-jwt-authentication/content.jsx
+++ b/swan-lake/by-example/http-client-self-signed-jwt-authentication/content.jsx
@@ -70,7 +70,7 @@ export function HttpClientSelfSignedJwtAuthentication({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-self-signed-jwt-authentication",
diff --git a/swan-lake/by-example/http-client-send-request-receive-response/content.jsx b/swan-lake/by-example/http-client-send-request-receive-response/content.jsx
index a8441f2b2e0..6bbe7b4ce43 100644
--- a/swan-lake/by-example/http-client-send-request-receive-response/content.jsx
+++ b/swan-lake/by-example/http-client-send-request-receive-response/content.jsx
@@ -65,7 +65,7 @@ export function HttpClientSendRequestReceiveResponse({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-send-request-receive-response",
diff --git a/swan-lake/by-example/http-client-ssl-tls/content.jsx b/swan-lake/by-example/http-client-ssl-tls/content.jsx
index d35eaac8978..054baa172ff 100644
--- a/swan-lake/by-example/http-client-ssl-tls/content.jsx
+++ b/swan-lake/by-example/http-client-ssl-tls/content.jsx
@@ -51,7 +51,7 @@ export function HttpClientSslTls({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-client-ssl-tls",
diff --git a/swan-lake/by-example/http-compression/content.jsx b/swan-lake/by-example/http-compression/content.jsx
index 7e8e4c13556..a561d7bfb5f 100644
--- a/swan-lake/by-example/http-compression/content.jsx
+++ b/swan-lake/by-example/http-compression/content.jsx
@@ -63,7 +63,7 @@ export function HttpCompression({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-compression",
diff --git a/swan-lake/by-example/http-cookies-client/content.jsx b/swan-lake/by-example/http-cookies-client/content.jsx
index c4be39bfc20..ac36a8fe0bc 100644
--- a/swan-lake/by-example/http-cookies-client/content.jsx
+++ b/swan-lake/by-example/http-cookies-client/content.jsx
@@ -62,7 +62,7 @@ export function HttpCookiesClient({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-cookies-client",
diff --git a/swan-lake/by-example/http-cookies-service/content.jsx b/swan-lake/by-example/http-cookies-service/content.jsx
index c0cfa108bbd..bd34965e64d 100644
--- a/swan-lake/by-example/http-cookies-service/content.jsx
+++ b/swan-lake/by-example/http-cookies-service/content.jsx
@@ -86,7 +86,7 @@ export function HttpCookiesService({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-cookies-service",
diff --git a/swan-lake/by-example/http-cors/content.jsx b/swan-lake/by-example/http-cors/content.jsx
index 3b219121906..bf42cda89be 100644
--- a/swan-lake/by-example/http-cors/content.jsx
+++ b/swan-lake/by-example/http-cors/content.jsx
@@ -72,7 +72,7 @@ export function HttpCors({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-cors",
diff --git a/swan-lake/by-example/http-default-error-handling/content.jsx b/swan-lake/by-example/http-default-error-handling/content.jsx
index 1fbf070da8b..646d2355a03 100644
--- a/swan-lake/by-example/http-default-error-handling/content.jsx
+++ b/swan-lake/by-example/http-default-error-handling/content.jsx
@@ -73,7 +73,7 @@ export function HttpDefaultErrorHandling({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-default-error-handling",
diff --git a/swan-lake/by-example/http-default-resource/content.jsx b/swan-lake/by-example/http-default-resource/content.jsx
index 092c10e2662..67529013949 100644
--- a/swan-lake/by-example/http-default-resource/content.jsx
+++ b/swan-lake/by-example/http-default-resource/content.jsx
@@ -53,7 +53,7 @@ export function HttpDefaultResource({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-default-resource",
diff --git a/swan-lake/by-example/http-error-handling/content.jsx b/swan-lake/by-example/http-error-handling/content.jsx
index 731137b3732..669b14a59c4 100644
--- a/swan-lake/by-example/http-error-handling/content.jsx
+++ b/swan-lake/by-example/http-error-handling/content.jsx
@@ -95,7 +95,7 @@ export function HttpErrorHandling({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-error-handling",
diff --git a/swan-lake/by-example/http-failover/content.jsx b/swan-lake/by-example/http-failover/content.jsx
index 331ae30d880..a784931d5bf 100644
--- a/swan-lake/by-example/http-failover/content.jsx
+++ b/swan-lake/by-example/http-failover/content.jsx
@@ -59,7 +59,7 @@ export function HttpFailover({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-failover",
diff --git a/swan-lake/by-example/http-header-param/content.jsx b/swan-lake/by-example/http-header-param/content.jsx
index bb57a11b69e..771634409c7 100644
--- a/swan-lake/by-example/http-header-param/content.jsx
+++ b/swan-lake/by-example/http-header-param/content.jsx
@@ -66,7 +66,7 @@ export function HttpHeaderParam({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-header-param",
diff --git a/swan-lake/by-example/http-interceptor-error-handling/content.jsx b/swan-lake/by-example/http-interceptor-error-handling/content.jsx
index b0c657c00b3..37235c1fd50 100644
--- a/swan-lake/by-example/http-interceptor-error-handling/content.jsx
+++ b/swan-lake/by-example/http-interceptor-error-handling/content.jsx
@@ -104,7 +104,7 @@ export function HttpInterceptorErrorHandling({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-interceptor-error-handling",
diff --git a/swan-lake/by-example/http-load-balancer/content.jsx b/swan-lake/by-example/http-load-balancer/content.jsx
index 0f8137656c5..2f1dcd77692 100644
--- a/swan-lake/by-example/http-load-balancer/content.jsx
+++ b/swan-lake/by-example/http-load-balancer/content.jsx
@@ -56,7 +56,7 @@ export function HttpLoadBalancer({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-load-balancer",
diff --git a/swan-lake/by-example/http-matrix-param/content.jsx b/swan-lake/by-example/http-matrix-param/content.jsx
index e508eca6d2d..4e0440a2ef1 100644
--- a/swan-lake/by-example/http-matrix-param/content.jsx
+++ b/swan-lake/by-example/http-matrix-param/content.jsx
@@ -65,7 +65,7 @@ export function HttpMatrixParam({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-matrix-param",
diff --git a/swan-lake/by-example/http-passthrough/content.jsx b/swan-lake/by-example/http-passthrough/content.jsx
index 13417b8eeae..9f3ea0c1212 100644
--- a/swan-lake/by-example/http-passthrough/content.jsx
+++ b/swan-lake/by-example/http-passthrough/content.jsx
@@ -59,7 +59,7 @@ export function HttpPassthrough({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-passthrough",
diff --git a/swan-lake/by-example/http-path-param/content.jsx b/swan-lake/by-example/http-path-param/content.jsx
index 6b19f09d47e..dcba619a337 100644
--- a/swan-lake/by-example/http-path-param/content.jsx
+++ b/swan-lake/by-example/http-path-param/content.jsx
@@ -64,7 +64,7 @@ export function HttpPathParam({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-path-param",
diff --git a/swan-lake/by-example/http-query-parameter/content.jsx b/swan-lake/by-example/http-query-parameter/content.jsx
index 437119a7554..2fee22dafe4 100644
--- a/swan-lake/by-example/http-query-parameter/content.jsx
+++ b/swan-lake/by-example/http-query-parameter/content.jsx
@@ -66,7 +66,7 @@ export function HttpQueryParameter({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-query-parameter",
diff --git a/swan-lake/by-example/http-request-interceptor/content.jsx b/swan-lake/by-example/http-request-interceptor/content.jsx
index a0ee4bbce55..20f0a1cce7f 100644
--- a/swan-lake/by-example/http-request-interceptor/content.jsx
+++ b/swan-lake/by-example/http-request-interceptor/content.jsx
@@ -105,7 +105,7 @@ export function HttpRequestInterceptor({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-request-interceptor",
diff --git a/swan-lake/by-example/http-request-response/content.jsx b/swan-lake/by-example/http-request-response/content.jsx
index 8ff1120eba0..ef41fe5491b 100644
--- a/swan-lake/by-example/http-request-response/content.jsx
+++ b/swan-lake/by-example/http-request-response/content.jsx
@@ -69,7 +69,7 @@ export function HttpRequestResponse({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-request-response",
diff --git a/swan-lake/by-example/http-request-with-multiparts/content.jsx b/swan-lake/by-example/http-request-with-multiparts/content.jsx
index 87cf755aa26..d95e64deef3 100644
--- a/swan-lake/by-example/http-request-with-multiparts/content.jsx
+++ b/swan-lake/by-example/http-request-with-multiparts/content.jsx
@@ -126,7 +126,7 @@ export function HttpRequestWithMultiparts({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-request-with-multiparts",
diff --git a/swan-lake/by-example/http-response-interceptor/content.jsx b/swan-lake/by-example/http-response-interceptor/content.jsx
index d931235e178..51c39a48bfd 100644
--- a/swan-lake/by-example/http-response-interceptor/content.jsx
+++ b/swan-lake/by-example/http-response-interceptor/content.jsx
@@ -100,7 +100,7 @@ export function HttpResponseInterceptor({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-response-interceptor",
diff --git a/swan-lake/by-example/http-response-with-multiparts/content.jsx b/swan-lake/by-example/http-response-with-multiparts/content.jsx
index d99ab8aab31..2edf93c5e80 100644
--- a/swan-lake/by-example/http-response-with-multiparts/content.jsx
+++ b/swan-lake/by-example/http-response-with-multiparts/content.jsx
@@ -152,7 +152,7 @@ export function HttpResponseWithMultiparts({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-response-with-multiparts",
diff --git a/swan-lake/by-example/http-restrict-by-media-type/content.jsx b/swan-lake/by-example/http-restrict-by-media-type/content.jsx
index f21286fcea9..c9e2a59e221 100644
--- a/swan-lake/by-example/http-restrict-by-media-type/content.jsx
+++ b/swan-lake/by-example/http-restrict-by-media-type/content.jsx
@@ -60,7 +60,7 @@ export function HttpRestrictByMediaType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-restrict-by-media-type",
diff --git a/swan-lake/by-example/http-retry/content.jsx b/swan-lake/by-example/http-retry/content.jsx
index 18a2cc928a0..19deb5b99e8 100644
--- a/swan-lake/by-example/http-retry/content.jsx
+++ b/swan-lake/by-example/http-retry/content.jsx
@@ -61,7 +61,7 @@ export function HttpRetry({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-retry",
diff --git a/swan-lake/by-example/http-send-different-status-codes-with-payload/content.jsx b/swan-lake/by-example/http-send-different-status-codes-with-payload/content.jsx
index 1375a9576be..f8342d7b251 100644
--- a/swan-lake/by-example/http-send-different-status-codes-with-payload/content.jsx
+++ b/swan-lake/by-example/http-send-different-status-codes-with-payload/content.jsx
@@ -76,7 +76,7 @@ export function HttpSendDifferentStatusCodesWithPayload({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-send-different-status-codes-with-payload",
diff --git a/swan-lake/by-example/http-send-different-status-codes/content.jsx b/swan-lake/by-example/http-send-different-status-codes/content.jsx
index a85ac05d382..101ffb08d72 100644
--- a/swan-lake/by-example/http-send-different-status-codes/content.jsx
+++ b/swan-lake/by-example/http-send-different-status-codes/content.jsx
@@ -64,7 +64,7 @@ export function HttpSendDifferentStatusCodes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-send-different-status-codes",
diff --git a/swan-lake/by-example/http-send-header/content.jsx b/swan-lake/by-example/http-send-header/content.jsx
index 6e1b923df18..0e448ca0e19 100644
--- a/swan-lake/by-example/http-send-header/content.jsx
+++ b/swan-lake/by-example/http-send-header/content.jsx
@@ -71,7 +71,7 @@ export function HttpSendHeader({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-send-header",
diff --git a/swan-lake/by-example/http-send-response/content.jsx b/swan-lake/by-example/http-send-response/content.jsx
index a2f42815fac..9fda5f75c50 100644
--- a/swan-lake/by-example/http-send-response/content.jsx
+++ b/swan-lake/by-example/http-send-response/content.jsx
@@ -64,7 +64,7 @@ export function HttpSendResponse({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-send-response",
diff --git a/swan-lake/by-example/http-service-and-resource-paths/content.jsx b/swan-lake/by-example/http-service-and-resource-paths/content.jsx
index 181771135c3..d191f4d4856 100644
--- a/swan-lake/by-example/http-service-and-resource-paths/content.jsx
+++ b/swan-lake/by-example/http-service-and-resource-paths/content.jsx
@@ -62,7 +62,7 @@ export function HttpServiceAndResourcePaths({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-and-resource-paths",
diff --git a/swan-lake/by-example/http-service-cache-response/content.jsx b/swan-lake/by-example/http-service-cache-response/content.jsx
index 09c38cafceb..83b335a7ce6 100644
--- a/swan-lake/by-example/http-service-cache-response/content.jsx
+++ b/swan-lake/by-example/http-service-cache-response/content.jsx
@@ -62,7 +62,7 @@ export function HttpServiceCacheResponse({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-cache-response",
diff --git a/swan-lake/by-example/http-service-chunking/content.jsx b/swan-lake/by-example/http-service-chunking/content.jsx
index ef5136a2654..5f81ccc0098 100644
--- a/swan-lake/by-example/http-service-chunking/content.jsx
+++ b/swan-lake/by-example/http-service-chunking/content.jsx
@@ -62,7 +62,7 @@ export function HttpServiceChunking({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-chunking",
diff --git a/swan-lake/by-example/http-service-data-binding/content.jsx b/swan-lake/by-example/http-service-data-binding/content.jsx
index 86aef20d294..70182ec978a 100644
--- a/swan-lake/by-example/http-service-data-binding/content.jsx
+++ b/swan-lake/by-example/http-service-data-binding/content.jsx
@@ -63,7 +63,7 @@ export function HttpServiceDataBinding({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-data-binding",
diff --git a/swan-lake/by-example/http-service-file-upload/content.jsx b/swan-lake/by-example/http-service-file-upload/content.jsx
index 4ff630a6635..3bcca69b7a4 100644
--- a/swan-lake/by-example/http-service-file-upload/content.jsx
+++ b/swan-lake/by-example/http-service-file-upload/content.jsx
@@ -49,7 +49,7 @@ export function HttpServiceFileUpload({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-file-upload",
diff --git a/swan-lake/by-example/http-service-payload-constraint-validation/content.jsx b/swan-lake/by-example/http-service-payload-constraint-validation/content.jsx
index b7c19e82728..db22afbd675 100644
--- a/swan-lake/by-example/http-service-payload-constraint-validation/content.jsx
+++ b/swan-lake/by-example/http-service-payload-constraint-validation/content.jsx
@@ -64,7 +64,7 @@ export function HttpServicePayloadConstraintValidation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-payload-constraint-validation",
diff --git a/swan-lake/by-example/http-service-redirects/content.jsx b/swan-lake/by-example/http-service-redirects/content.jsx
index b68ee4eec6f..58816a3b041 100644
--- a/swan-lake/by-example/http-service-redirects/content.jsx
+++ b/swan-lake/by-example/http-service-redirects/content.jsx
@@ -51,7 +51,7 @@ export function HttpServiceRedirects({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-service-redirects",
diff --git a/swan-lake/by-example/http-timeout/content.jsx b/swan-lake/by-example/http-timeout/content.jsx
index 3f2fa3206a0..2d8ddf2236c 100644
--- a/swan-lake/by-example/http-timeout/content.jsx
+++ b/swan-lake/by-example/http-timeout/content.jsx
@@ -49,7 +49,7 @@ export function HttpTimeout({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-timeout",
diff --git a/swan-lake/by-example/http-trace-logs/content.jsx b/swan-lake/by-example/http-trace-logs/content.jsx
index 97542c2f97f..df7a297d477 100644
--- a/swan-lake/by-example/http-trace-logs/content.jsx
+++ b/swan-lake/by-example/http-trace-logs/content.jsx
@@ -62,7 +62,7 @@ export function HttpTraceLogs({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-trace-logs",
@@ -360,7 +360,7 @@ export function HttpTraceLogs({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/http-trace-logs",
diff --git a/swan-lake/by-example/identifiers/content.jsx b/swan-lake/by-example/identifiers/content.jsx
index d3d21b882ba..d64b7aac525 100644
--- a/swan-lake/by-example/identifiers/content.jsx
+++ b/swan-lake/by-example/identifiers/content.jsx
@@ -45,7 +45,7 @@ export function Identifiers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/identifiers",
diff --git a/swan-lake/by-example/identity/content.jsx b/swan-lake/by-example/identity/content.jsx
index edd9a1e9205..3cbafc8cd54 100644
--- a/swan-lake/by-example/identity/content.jsx
+++ b/swan-lake/by-example/identity/content.jsx
@@ -72,7 +72,7 @@ export function Identity({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/identity",
diff --git a/swan-lake/by-example/if-statement/content.jsx b/swan-lake/by-example/if-statement/content.jsx
index 12e02e9d291..9a61b66bf1c 100644
--- a/swan-lake/by-example/if-statement/content.jsx
+++ b/swan-lake/by-example/if-statement/content.jsx
@@ -70,7 +70,7 @@ export function IfStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/if-statement",
diff --git a/swan-lake/by-example/ignoring-return-values-and-errors/content.jsx b/swan-lake/by-example/ignoring-return-values-and-errors/content.jsx
index 5fce1637f6b..e6c8c7b3767 100644
--- a/swan-lake/by-example/ignoring-return-values-and-errors/content.jsx
+++ b/swan-lake/by-example/ignoring-return-values-and-errors/content.jsx
@@ -71,7 +71,7 @@ export function IgnoringReturnValuesAndErrors({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/ignoring-return-values-and-errors",
diff --git a/swan-lake/by-example/included-record-parameters/content.jsx b/swan-lake/by-example/included-record-parameters/content.jsx
index 3ba6c61dc92..df992559bad 100644
--- a/swan-lake/by-example/included-record-parameters/content.jsx
+++ b/swan-lake/by-example/included-record-parameters/content.jsx
@@ -56,7 +56,7 @@ export function IncludedRecordParameters({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/included-record-parameters",
diff --git a/swan-lake/by-example/inferring-isolated/content.jsx b/swan-lake/by-example/inferring-isolated/content.jsx
index bef4ececf13..332b54a2722 100644
--- a/swan-lake/by-example/inferring-isolated/content.jsx
+++ b/swan-lake/by-example/inferring-isolated/content.jsx
@@ -82,7 +82,7 @@ export function InferringIsolated({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/inferring-isolated",
diff --git a/swan-lake/by-example/init-function/content.jsx b/swan-lake/by-example/init-function/content.jsx
index 6cb555ce1d4..fcd2e21b5bd 100644
--- a/swan-lake/by-example/init-function/content.jsx
+++ b/swan-lake/by-example/init-function/content.jsx
@@ -64,7 +64,7 @@ export function InitFunction({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/init-function",
diff --git a/swan-lake/by-example/init-return-type/content.jsx b/swan-lake/by-example/init-return-type/content.jsx
index 69ba00d7d6a..62f9803795e 100644
--- a/swan-lake/by-example/init-return-type/content.jsx
+++ b/swan-lake/by-example/init-return-type/content.jsx
@@ -60,7 +60,7 @@ export function InitReturnType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/init-return-type",
diff --git a/swan-lake/by-example/int-range/content.jsx b/swan-lake/by-example/int-range/content.jsx
index 7029fcb20c0..b56c81f62ec 100644
--- a/swan-lake/by-example/int-range/content.jsx
+++ b/swan-lake/by-example/int-range/content.jsx
@@ -57,7 +57,7 @@ export function IntRange({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/int-range",
diff --git a/swan-lake/by-example/integers/content.jsx b/swan-lake/by-example/integers/content.jsx
index 59144960ef0..1f9caabeb21 100644
--- a/swan-lake/by-example/integers/content.jsx
+++ b/swan-lake/by-example/integers/content.jsx
@@ -47,7 +47,7 @@ export function Integers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/integers",
diff --git a/swan-lake/by-example/inter-worker-failure-propagation/content.jsx b/swan-lake/by-example/inter-worker-failure-propagation/content.jsx
index af7840d54c9..efed2a4c49f 100644
--- a/swan-lake/by-example/inter-worker-failure-propagation/content.jsx
+++ b/swan-lake/by-example/inter-worker-failure-propagation/content.jsx
@@ -72,7 +72,7 @@ export function InterWorkerFailurePropagation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/inter-worker-failure-propagation",
diff --git a/swan-lake/by-example/inter-worker-message-passing/content.jsx b/swan-lake/by-example/inter-worker-message-passing/content.jsx
index 052fcf6f94b..3185e0c25fe 100644
--- a/swan-lake/by-example/inter-worker-message-passing/content.jsx
+++ b/swan-lake/by-example/inter-worker-message-passing/content.jsx
@@ -69,7 +69,7 @@ export function InterWorkerMessagePassing({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/inter-worker-message-passing",
diff --git a/swan-lake/by-example/interface-to-external-code/content.jsx b/swan-lake/by-example/interface-to-external-code/content.jsx
index aaa230f564c..835aa4c4f35 100644
--- a/swan-lake/by-example/interface-to-external-code/content.jsx
+++ b/swan-lake/by-example/interface-to-external-code/content.jsx
@@ -61,7 +61,7 @@ export function InterfaceToExternalCode({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/interface-to-external-code",
diff --git a/swan-lake/by-example/io-csv-datamapping/content.jsx b/swan-lake/by-example/io-csv-datamapping/content.jsx
index fcf93d528e9..8e63ead3057 100644
--- a/swan-lake/by-example/io-csv-datamapping/content.jsx
+++ b/swan-lake/by-example/io-csv-datamapping/content.jsx
@@ -79,7 +79,7 @@ export function IoCsvDatamapping({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/io-csv-datamapping",
diff --git a/swan-lake/by-example/io-csv/content.jsx b/swan-lake/by-example/io-csv/content.jsx
index 3f71d17c30e..c0d2b2bb630 100644
--- a/swan-lake/by-example/io-csv/content.jsx
+++ b/swan-lake/by-example/io-csv/content.jsx
@@ -65,7 +65,7 @@ export function IoCsv({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/io-csv",
diff --git a/swan-lake/by-example/io-json/content.jsx b/swan-lake/by-example/io-json/content.jsx
index 6eec87fa83e..bb76755677b 100644
--- a/swan-lake/by-example/io-json/content.jsx
+++ b/swan-lake/by-example/io-json/content.jsx
@@ -62,7 +62,7 @@ export function IoJson({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/io-json",
diff --git a/swan-lake/by-example/io-strings/content.jsx b/swan-lake/by-example/io-strings/content.jsx
index 5503140d040..a708316a716 100644
--- a/swan-lake/by-example/io-strings/content.jsx
+++ b/swan-lake/by-example/io-strings/content.jsx
@@ -75,7 +75,7 @@ export function IoStrings({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/io-strings",
diff --git a/swan-lake/by-example/io-xml/content.jsx b/swan-lake/by-example/io-xml/content.jsx
index a57d40ee095..57d535cccea 100644
--- a/swan-lake/by-example/io-xml/content.jsx
+++ b/swan-lake/by-example/io-xml/content.jsx
@@ -54,7 +54,7 @@ export function IoXml({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/io-xml",
diff --git a/swan-lake/by-example/isolated-functions/content.jsx b/swan-lake/by-example/isolated-functions/content.jsx
index ad4c939950a..95c5c625e52 100644
--- a/swan-lake/by-example/isolated-functions/content.jsx
+++ b/swan-lake/by-example/isolated-functions/content.jsx
@@ -95,7 +95,7 @@ export function IsolatedFunctions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/isolated-functions",
diff --git a/swan-lake/by-example/isolated-methods/content.jsx b/swan-lake/by-example/isolated-methods/content.jsx
index 263f8df45ec..40ff25aef4a 100644
--- a/swan-lake/by-example/isolated-methods/content.jsx
+++ b/swan-lake/by-example/isolated-methods/content.jsx
@@ -73,7 +73,7 @@ export function IsolatedMethods({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/isolated-methods",
diff --git a/swan-lake/by-example/isolated-objects/content.jsx b/swan-lake/by-example/isolated-objects/content.jsx
index 142877349cc..3494b46c153 100644
--- a/swan-lake/by-example/isolated-objects/content.jsx
+++ b/swan-lake/by-example/isolated-objects/content.jsx
@@ -113,7 +113,7 @@ export function IsolatedObjects({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/isolated-objects",
diff --git a/swan-lake/by-example/isolated-variables/content.jsx b/swan-lake/by-example/isolated-variables/content.jsx
index b11343e76ee..d3147f6187e 100644
--- a/swan-lake/by-example/isolated-variables/content.jsx
+++ b/swan-lake/by-example/isolated-variables/content.jsx
@@ -94,7 +94,7 @@ export function IsolatedVariables({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/isolated-variables",
diff --git a/swan-lake/by-example/iterating-over-xml-with-query/content.jsx b/swan-lake/by-example/iterating-over-xml-with-query/content.jsx
index 4a8cd9509ca..8af44bc1388 100644
--- a/swan-lake/by-example/iterating-over-xml-with-query/content.jsx
+++ b/swan-lake/by-example/iterating-over-xml-with-query/content.jsx
@@ -65,7 +65,7 @@ export function IteratingOverXmlWithQuery({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/iterating-over-xml-with-query",
diff --git a/swan-lake/by-example/iterative-use-of-typed-binding/content.jsx b/swan-lake/by-example/iterative-use-of-typed-binding/content.jsx
index 33c81f52953..d352b6e21d9 100644
--- a/swan-lake/by-example/iterative-use-of-typed-binding/content.jsx
+++ b/swan-lake/by-example/iterative-use-of-typed-binding/content.jsx
@@ -75,7 +75,7 @@ export function IterativeUseOfTypedBinding({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/iterative-use-of-typed-binding",
diff --git a/swan-lake/by-example/joining-iterable-objects/content.jsx b/swan-lake/by-example/joining-iterable-objects/content.jsx
index cbfae0bff1d..64894a8108d 100644
--- a/swan-lake/by-example/joining-iterable-objects/content.jsx
+++ b/swan-lake/by-example/joining-iterable-objects/content.jsx
@@ -81,7 +81,7 @@ export function JoiningIterableObjects({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/joining-iterable-objects",
diff --git a/swan-lake/by-example/json-numbers/content.jsx b/swan-lake/by-example/json-numbers/content.jsx
index f0b6c269811..badce319292 100644
--- a/swan-lake/by-example/json-numbers/content.jsx
+++ b/swan-lake/by-example/json-numbers/content.jsx
@@ -78,7 +78,7 @@ export function JsonNumbers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/json-numbers",
diff --git a/swan-lake/by-example/json-type/content.jsx b/swan-lake/by-example/json-type/content.jsx
index 9afc3c8de05..89950fe9725 100644
--- a/swan-lake/by-example/json-type/content.jsx
+++ b/swan-lake/by-example/json-type/content.jsx
@@ -85,7 +85,7 @@ export function JsonType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/json-type",
diff --git a/swan-lake/by-example/langlib-functions/content.jsx b/swan-lake/by-example/langlib-functions/content.jsx
index 82fd42c0aa5..2490f7f2218 100644
--- a/swan-lake/by-example/langlib-functions/content.jsx
+++ b/swan-lake/by-example/langlib-functions/content.jsx
@@ -86,7 +86,7 @@ export function LanglibFunctions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/langlib-functions",
diff --git a/swan-lake/by-example/let-clause/content.jsx b/swan-lake/by-example/let-clause/content.jsx
index b95c6db2d32..bc0d1245ed1 100644
--- a/swan-lake/by-example/let-clause/content.jsx
+++ b/swan-lake/by-example/let-clause/content.jsx
@@ -68,7 +68,7 @@ export function LetClause({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/let-clause",
diff --git a/swan-lake/by-example/limit-clause/content.jsx b/swan-lake/by-example/limit-clause/content.jsx
index bccc868e8cc..b14b737da14 100644
--- a/swan-lake/by-example/limit-clause/content.jsx
+++ b/swan-lake/by-example/limit-clause/content.jsx
@@ -60,7 +60,7 @@ export function LimitClause({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/limit-clause",
diff --git a/swan-lake/by-example/list-binding-pattern-in-match-statement/content.jsx b/swan-lake/by-example/list-binding-pattern-in-match-statement/content.jsx
index f1039e6d8f6..fdc024bfafd 100644
--- a/swan-lake/by-example/list-binding-pattern-in-match-statement/content.jsx
+++ b/swan-lake/by-example/list-binding-pattern-in-match-statement/content.jsx
@@ -62,7 +62,7 @@ export function ListBindingPatternInMatchStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/list-binding-pattern-in-match-statement",
diff --git a/swan-lake/by-example/list-binding-pattern/content.jsx b/swan-lake/by-example/list-binding-pattern/content.jsx
index 194d3160a3b..097f77348eb 100644
--- a/swan-lake/by-example/list-binding-pattern/content.jsx
+++ b/swan-lake/by-example/list-binding-pattern/content.jsx
@@ -49,7 +49,7 @@ export function ListBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/list-binding-pattern",
diff --git a/swan-lake/by-example/list-equality/content.jsx b/swan-lake/by-example/list-equality/content.jsx
index 934aecdb003..c38fb0cdc0b 100644
--- a/swan-lake/by-example/list-equality/content.jsx
+++ b/swan-lake/by-example/list-equality/content.jsx
@@ -69,7 +69,7 @@ export function ListEquality({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/list-equality",
diff --git a/swan-lake/by-example/list-subtyping/content.jsx b/swan-lake/by-example/list-subtyping/content.jsx
index e980b1970d9..a43a8566500 100644
--- a/swan-lake/by-example/list-subtyping/content.jsx
+++ b/swan-lake/by-example/list-subtyping/content.jsx
@@ -62,7 +62,7 @@ export function ListSubtyping({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/list-subtyping",
diff --git a/swan-lake/by-example/lock-statement/content.jsx b/swan-lake/by-example/lock-statement/content.jsx
index 319411239c7..99ac1ebf61c 100644
--- a/swan-lake/by-example/lock-statement/content.jsx
+++ b/swan-lake/by-example/lock-statement/content.jsx
@@ -52,7 +52,7 @@ export function LockStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/lock-statement",
diff --git a/swan-lake/by-example/logging-with-context/content.jsx b/swan-lake/by-example/logging-with-context/content.jsx
index 6d287ef4648..48d80b190b6 100644
--- a/swan-lake/by-example/logging-with-context/content.jsx
+++ b/swan-lake/by-example/logging-with-context/content.jsx
@@ -56,7 +56,7 @@ export function LoggingWithContext({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/logging-with-context",
diff --git a/swan-lake/by-example/logging/content.jsx b/swan-lake/by-example/logging/content.jsx
index c21c23d3b0b..2a78f4bfce8 100644
--- a/swan-lake/by-example/logging/content.jsx
+++ b/swan-lake/by-example/logging/content.jsx
@@ -58,7 +58,7 @@ export function Logging({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/logging",
diff --git a/swan-lake/by-example/manage-scheduled-jobs/content.jsx b/swan-lake/by-example/manage-scheduled-jobs/content.jsx
index 395d04264e1..5bdfb90ab2c 100644
--- a/swan-lake/by-example/manage-scheduled-jobs/content.jsx
+++ b/swan-lake/by-example/manage-scheduled-jobs/content.jsx
@@ -109,7 +109,7 @@ export function ManageScheduledJobs({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/manage-scheduled-jobs",
diff --git a/swan-lake/by-example/mapping-binding-pattern-in-match-statement/content.jsx b/swan-lake/by-example/mapping-binding-pattern-in-match-statement/content.jsx
index eef144a8bba..5ace2949187 100644
--- a/swan-lake/by-example/mapping-binding-pattern-in-match-statement/content.jsx
+++ b/swan-lake/by-example/mapping-binding-pattern-in-match-statement/content.jsx
@@ -88,7 +88,7 @@ export function MappingBindingPatternInMatchStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/mapping-binding-pattern-in-match-statement",
diff --git a/swan-lake/by-example/mapping-binding-pattern/content.jsx b/swan-lake/by-example/mapping-binding-pattern/content.jsx
index e8a54ad86ed..1a9259b9bc5 100644
--- a/swan-lake/by-example/mapping-binding-pattern/content.jsx
+++ b/swan-lake/by-example/mapping-binding-pattern/content.jsx
@@ -76,7 +76,7 @@ export function MappingBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/mapping-binding-pattern",
diff --git a/swan-lake/by-example/maps/content.jsx b/swan-lake/by-example/maps/content.jsx
index baada6aac2e..04fdb3f13b2 100644
--- a/swan-lake/by-example/maps/content.jsx
+++ b/swan-lake/by-example/maps/content.jsx
@@ -71,7 +71,7 @@ export function Maps({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/maps",
diff --git a/swan-lake/by-example/match-guard-in-match-statement/content.jsx b/swan-lake/by-example/match-guard-in-match-statement/content.jsx
index 0e25d608ad7..c03a070485c 100644
--- a/swan-lake/by-example/match-guard-in-match-statement/content.jsx
+++ b/swan-lake/by-example/match-guard-in-match-statement/content.jsx
@@ -79,7 +79,7 @@ export function MatchGuardInMatchStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/match-guard-in-match-statement",
diff --git a/swan-lake/by-example/match-statement-with-maps/content.jsx b/swan-lake/by-example/match-statement-with-maps/content.jsx
index a19b5c4e6c7..ce458979a16 100644
--- a/swan-lake/by-example/match-statement-with-maps/content.jsx
+++ b/swan-lake/by-example/match-statement-with-maps/content.jsx
@@ -58,7 +58,7 @@ export function MatchStatementWithMaps({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/match-statement-with-maps",
diff --git a/swan-lake/by-example/match-statement/content.jsx b/swan-lake/by-example/match-statement/content.jsx
index 556daf50fac..55cdb9b4dab 100644
--- a/swan-lake/by-example/match-statement/content.jsx
+++ b/swan-lake/by-example/match-statement/content.jsx
@@ -78,7 +78,7 @@ export function MatchStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/match-statement",
diff --git a/swan-lake/by-example/module-lifecycle/content.jsx b/swan-lake/by-example/module-lifecycle/content.jsx
index 86cec1cbd9c..30703b737ce 100644
--- a/swan-lake/by-example/module-lifecycle/content.jsx
+++ b/swan-lake/by-example/module-lifecycle/content.jsx
@@ -57,7 +57,7 @@ export function ModuleLifecycle({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/module-lifecycle",
diff --git a/swan-lake/by-example/multiple-key-fields/content.jsx b/swan-lake/by-example/multiple-key-fields/content.jsx
index 042b8ee7e97..a68f195dcf6 100644
--- a/swan-lake/by-example/multiple-key-fields/content.jsx
+++ b/swan-lake/by-example/multiple-key-fields/content.jsx
@@ -62,7 +62,7 @@ export function MultipleKeyFields({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/multiple-key-fields",
diff --git a/swan-lake/by-example/multiple-wait/content.jsx b/swan-lake/by-example/multiple-wait/content.jsx
index 86ab75fbabb..1be0bdcfe58 100644
--- a/swan-lake/by-example/multiple-wait/content.jsx
+++ b/swan-lake/by-example/multiple-wait/content.jsx
@@ -64,7 +64,7 @@ export function MultipleWait({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/multiple-wait",
diff --git a/swan-lake/by-example/named-worker-return-values/content.jsx b/swan-lake/by-example/named-worker-return-values/content.jsx
index ab0141ecb59..a72e4722ec2 100644
--- a/swan-lake/by-example/named-worker-return-values/content.jsx
+++ b/swan-lake/by-example/named-worker-return-values/content.jsx
@@ -67,7 +67,7 @@ export function NamedWorkerReturnValues({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/named-worker-return-values",
diff --git a/swan-lake/by-example/named-workers-and-futures/content.jsx b/swan-lake/by-example/named-workers-and-futures/content.jsx
index 1735060b14c..c9cae6579a9 100644
--- a/swan-lake/by-example/named-workers-and-futures/content.jsx
+++ b/swan-lake/by-example/named-workers-and-futures/content.jsx
@@ -63,7 +63,7 @@ export function NamedWorkersAndFutures({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/named-workers-and-futures",
diff --git a/swan-lake/by-example/named-workers/content.jsx b/swan-lake/by-example/named-workers/content.jsx
index 3fe2cb6a2e4..f6d83c6e720 100644
--- a/swan-lake/by-example/named-workers/content.jsx
+++ b/swan-lake/by-example/named-workers/content.jsx
@@ -61,7 +61,7 @@ export function NamedWorkers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/named-workers",
diff --git a/swan-lake/by-example/nested-arrays/content.jsx b/swan-lake/by-example/nested-arrays/content.jsx
index 08b7fc33950..8dc97251bd9 100644
--- a/swan-lake/by-example/nested-arrays/content.jsx
+++ b/swan-lake/by-example/nested-arrays/content.jsx
@@ -63,7 +63,7 @@ export function NestedArrays({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/nested-arrays",
diff --git a/swan-lake/by-example/nested-query-expressions/content.jsx b/swan-lake/by-example/nested-query-expressions/content.jsx
index cc41113233e..d5726d05549 100644
--- a/swan-lake/by-example/nested-query-expressions/content.jsx
+++ b/swan-lake/by-example/nested-query-expressions/content.jsx
@@ -51,7 +51,7 @@ export function NestedQueryExpressions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/nested-query-expressions",
diff --git a/swan-lake/by-example/never-type/content.jsx b/swan-lake/by-example/never-type/content.jsx
index 2ffb8519459..453eece81e4 100644
--- a/swan-lake/by-example/never-type/content.jsx
+++ b/swan-lake/by-example/never-type/content.jsx
@@ -72,7 +72,7 @@ export function NeverType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/never-type",
diff --git a/swan-lake/by-example/nil/content.jsx b/swan-lake/by-example/nil/content.jsx
index 6bdfc1ff7ec..e2d1e948145 100644
--- a/swan-lake/by-example/nil/content.jsx
+++ b/swan-lake/by-example/nil/content.jsx
@@ -55,7 +55,7 @@ export function Nil({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/nil",
diff --git a/swan-lake/by-example/object-closure/content.jsx b/swan-lake/by-example/object-closure/content.jsx
index 43e7ed72f23..246616850db 100644
--- a/swan-lake/by-example/object-closure/content.jsx
+++ b/swan-lake/by-example/object-closure/content.jsx
@@ -52,7 +52,7 @@ export function ObjectClosure({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/object-closure",
diff --git a/swan-lake/by-example/object-constructor/content.jsx b/swan-lake/by-example/object-constructor/content.jsx
index 9136a718c68..822c0e46a39 100644
--- a/swan-lake/by-example/object-constructor/content.jsx
+++ b/swan-lake/by-example/object-constructor/content.jsx
@@ -59,7 +59,7 @@ export function ObjectConstructor({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/object-constructor",
diff --git a/swan-lake/by-example/object-type-inclusion/content.jsx b/swan-lake/by-example/object-type-inclusion/content.jsx
index 8fc4f8b89a2..7e8a5b27259 100644
--- a/swan-lake/by-example/object-type-inclusion/content.jsx
+++ b/swan-lake/by-example/object-type-inclusion/content.jsx
@@ -88,7 +88,7 @@ export function ObjectTypeInclusion({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/object-type-inclusion",
diff --git a/swan-lake/by-example/object-types/content.jsx b/swan-lake/by-example/object-types/content.jsx
index 01b88882343..740bc83ba07 100644
--- a/swan-lake/by-example/object-types/content.jsx
+++ b/swan-lake/by-example/object-types/content.jsx
@@ -61,7 +61,7 @@ export function ObjectTypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/object-types",
diff --git a/swan-lake/by-example/object-value-from-class-definition/content.jsx b/swan-lake/by-example/object-value-from-class-definition/content.jsx
index aa95308f03a..5eb0b235fb7 100644
--- a/swan-lake/by-example/object-value-from-class-definition/content.jsx
+++ b/swan-lake/by-example/object-value-from-class-definition/content.jsx
@@ -79,7 +79,7 @@ export function ObjectValueFromClassDefinition({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/object-value-from-class-definition",
diff --git a/swan-lake/by-example/object/content.jsx b/swan-lake/by-example/object/content.jsx
index bdab845ccc2..38f196f11ca 100644
--- a/swan-lake/by-example/object/content.jsx
+++ b/swan-lake/by-example/object/content.jsx
@@ -66,7 +66,7 @@ export function Object({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/object",
diff --git a/swan-lake/by-example/on-conflict-clause/content.jsx b/swan-lake/by-example/on-conflict-clause/content.jsx
index 7bff402cd84..4f8412592a2 100644
--- a/swan-lake/by-example/on-conflict-clause/content.jsx
+++ b/swan-lake/by-example/on-conflict-clause/content.jsx
@@ -82,7 +82,7 @@ export function OnConflictClause({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/on-conflict-clause",
diff --git a/swan-lake/by-example/open-records/content.jsx b/swan-lake/by-example/open-records/content.jsx
index b0ebc05ddf7..b9da7c751df 100644
--- a/swan-lake/by-example/open-records/content.jsx
+++ b/swan-lake/by-example/open-records/content.jsx
@@ -93,7 +93,7 @@ export function OpenRecords({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/open-records",
diff --git a/swan-lake/by-example/optional-fields/content.jsx b/swan-lake/by-example/optional-fields/content.jsx
index 21e7ce0662c..63c66daf688 100644
--- a/swan-lake/by-example/optional-fields/content.jsx
+++ b/swan-lake/by-example/optional-fields/content.jsx
@@ -78,7 +78,7 @@ export function OptionalFields({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/optional-fields",
diff --git a/swan-lake/by-example/outer-join-clause/content.jsx b/swan-lake/by-example/outer-join-clause/content.jsx
index ba40fb04dd0..98c15bb02ce 100644
--- a/swan-lake/by-example/outer-join-clause/content.jsx
+++ b/swan-lake/by-example/outer-join-clause/content.jsx
@@ -78,7 +78,7 @@ export function OuterJoinClause({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/outer-join-clause",
diff --git a/swan-lake/by-example/panics/content.jsx b/swan-lake/by-example/panics/content.jsx
index 58c6b492910..80b064edb19 100644
--- a/swan-lake/by-example/panics/content.jsx
+++ b/swan-lake/by-example/panics/content.jsx
@@ -68,7 +68,7 @@ export function Panics({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/panics",
diff --git a/swan-lake/by-example/programs-and-modules/content.jsx b/swan-lake/by-example/programs-and-modules/content.jsx
index f4e7f2a4089..e9d6fae790a 100644
--- a/swan-lake/by-example/programs-and-modules/content.jsx
+++ b/swan-lake/by-example/programs-and-modules/content.jsx
@@ -44,7 +44,7 @@ export function ProgramsAndModules({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/programs-and-modules",
diff --git a/swan-lake/by-example/provide-function-arguments-by-name/content.jsx b/swan-lake/by-example/provide-function-arguments-by-name/content.jsx
index ac2fb9d7261..19eaa292412 100644
--- a/swan-lake/by-example/provide-function-arguments-by-name/content.jsx
+++ b/swan-lake/by-example/provide-function-arguments-by-name/content.jsx
@@ -51,7 +51,7 @@ export function ProvideFunctionArgumentsByName({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/provide-function-arguments-by-name",
diff --git a/swan-lake/by-example/query-actions/content.jsx b/swan-lake/by-example/query-actions/content.jsx
index f42e1b0dd7f..43d4af9accd 100644
--- a/swan-lake/by-example/query-actions/content.jsx
+++ b/swan-lake/by-example/query-actions/content.jsx
@@ -66,7 +66,7 @@ export function QueryActions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/query-actions",
diff --git a/swan-lake/by-example/query-expressions/content.jsx b/swan-lake/by-example/query-expressions/content.jsx
index c7dd67e6f62..10d51c0c3d9 100644
--- a/swan-lake/by-example/query-expressions/content.jsx
+++ b/swan-lake/by-example/query-expressions/content.jsx
@@ -71,7 +71,7 @@ export function QueryExpressions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/query-expressions",
diff --git a/swan-lake/by-example/querying-tables/content.jsx b/swan-lake/by-example/querying-tables/content.jsx
index d955f9a088e..9d3df66e498 100644
--- a/swan-lake/by-example/querying-tables/content.jsx
+++ b/swan-lake/by-example/querying-tables/content.jsx
@@ -67,7 +67,7 @@ export function QueryingTables({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/querying-tables",
diff --git a/swan-lake/by-example/querying-with-streams/content.jsx b/swan-lake/by-example/querying-with-streams/content.jsx
index 52a33bbcc55..da068a94a90 100644
--- a/swan-lake/by-example/querying-with-streams/content.jsx
+++ b/swan-lake/by-example/querying-with-streams/content.jsx
@@ -62,7 +62,7 @@ export function QueryingWithStreams({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/querying-with-streams",
diff --git a/swan-lake/by-example/random-numbers/content.jsx b/swan-lake/by-example/random-numbers/content.jsx
index 7219821af41..cc8c11a874d 100644
--- a/swan-lake/by-example/random-numbers/content.jsx
+++ b/swan-lake/by-example/random-numbers/content.jsx
@@ -52,7 +52,7 @@ export function RandomNumbers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/random-numbers",
diff --git a/swan-lake/by-example/readonly-and-isolated/content.jsx b/swan-lake/by-example/readonly-and-isolated/content.jsx
index e9d8d69f1c5..0a0e9b761bd 100644
--- a/swan-lake/by-example/readonly-and-isolated/content.jsx
+++ b/swan-lake/by-example/readonly-and-isolated/content.jsx
@@ -63,7 +63,7 @@ export function ReadonlyAndIsolated({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/readonly-and-isolated",
diff --git a/swan-lake/by-example/readonly-objects-and-classes/content.jsx b/swan-lake/by-example/readonly-objects-and-classes/content.jsx
index 327ee6a3184..b1ec83351f5 100644
--- a/swan-lake/by-example/readonly-objects-and-classes/content.jsx
+++ b/swan-lake/by-example/readonly-objects-and-classes/content.jsx
@@ -70,7 +70,7 @@ export function ReadonlyObjectsAndClasses({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/readonly-objects-and-classes",
diff --git a/swan-lake/by-example/readonly-type/content.jsx b/swan-lake/by-example/readonly-type/content.jsx
index 10b6d770358..2059faa222d 100644
--- a/swan-lake/by-example/readonly-type/content.jsx
+++ b/swan-lake/by-example/readonly-type/content.jsx
@@ -60,7 +60,7 @@ export function ReadonlyType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/readonly-type",
diff --git a/swan-lake/by-example/record-to-edi/content.jsx b/swan-lake/by-example/record-to-edi/content.jsx
index 39efd17bd32..be3457c3131 100644
--- a/swan-lake/by-example/record-to-edi/content.jsx
+++ b/swan-lake/by-example/record-to-edi/content.jsx
@@ -76,7 +76,7 @@ export function RecordToEdi({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/record-to-edi",
@@ -166,7 +166,7 @@ export function RecordToEdi({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/record-to-edi",
@@ -466,7 +466,7 @@ export function RecordToEdi({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/record-to-edi",
diff --git a/swan-lake/by-example/records/content.jsx b/swan-lake/by-example/records/content.jsx
index 0429ef00752..62b55613b09 100644
--- a/swan-lake/by-example/records/content.jsx
+++ b/swan-lake/by-example/records/content.jsx
@@ -88,7 +88,7 @@ export function Records({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/records",
diff --git a/swan-lake/by-example/regexp-operations/content.jsx b/swan-lake/by-example/regexp-operations/content.jsx
index 95d32ec286f..f40d0b1e878 100644
--- a/swan-lake/by-example/regexp-operations/content.jsx
+++ b/swan-lake/by-example/regexp-operations/content.jsx
@@ -65,7 +65,7 @@ export function RegexpOperations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/regexp-operations",
diff --git a/swan-lake/by-example/regexp-type/content.jsx b/swan-lake/by-example/regexp-type/content.jsx
index 838b33adb2d..225ba93d874 100644
--- a/swan-lake/by-example/regexp-type/content.jsx
+++ b/swan-lake/by-example/regexp-type/content.jsx
@@ -93,7 +93,7 @@ export function RegexpType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/regexp-type",
diff --git a/swan-lake/by-example/rest-binding-pattern-in-error-binding-pattern/content.jsx b/swan-lake/by-example/rest-binding-pattern-in-error-binding-pattern/content.jsx
index 36668491f0f..6e9bdab3edf 100644
--- a/swan-lake/by-example/rest-binding-pattern-in-error-binding-pattern/content.jsx
+++ b/swan-lake/by-example/rest-binding-pattern-in-error-binding-pattern/content.jsx
@@ -70,7 +70,7 @@ export function RestBindingPatternInErrorBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/rest-binding-pattern-in-error-binding-pattern",
diff --git a/swan-lake/by-example/rest-binding-pattern-in-list-binding-pattern/content.jsx b/swan-lake/by-example/rest-binding-pattern-in-list-binding-pattern/content.jsx
index 70b4b70b6ae..883629bbc78 100644
--- a/swan-lake/by-example/rest-binding-pattern-in-list-binding-pattern/content.jsx
+++ b/swan-lake/by-example/rest-binding-pattern-in-list-binding-pattern/content.jsx
@@ -51,7 +51,7 @@ export function RestBindingPatternInListBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/rest-binding-pattern-in-list-binding-pattern",
diff --git a/swan-lake/by-example/rest-binding-pattern-in-mapping-binding-pattern/content.jsx b/swan-lake/by-example/rest-binding-pattern-in-mapping-binding-pattern/content.jsx
index 85a7b9853fd..338a1b3067a 100644
--- a/swan-lake/by-example/rest-binding-pattern-in-mapping-binding-pattern/content.jsx
+++ b/swan-lake/by-example/rest-binding-pattern-in-mapping-binding-pattern/content.jsx
@@ -69,7 +69,7 @@ export function RestBindingPatternInMappingBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/rest-binding-pattern-in-mapping-binding-pattern",
diff --git a/swan-lake/by-example/rest-parameters/content.jsx b/swan-lake/by-example/rest-parameters/content.jsx
index 37558ebbf65..325ef44d4a9 100644
--- a/swan-lake/by-example/rest-parameters/content.jsx
+++ b/swan-lake/by-example/rest-parameters/content.jsx
@@ -57,7 +57,7 @@ export function RestParameters({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/rest-parameters",
diff --git a/swan-lake/by-example/rest-type-in-tuples/content.jsx b/swan-lake/by-example/rest-type-in-tuples/content.jsx
index df89bc7347c..23c697822c7 100644
--- a/swan-lake/by-example/rest-type-in-tuples/content.jsx
+++ b/swan-lake/by-example/rest-type-in-tuples/content.jsx
@@ -57,7 +57,7 @@ export function RestTypeInTuples({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/rest-type-in-tuples",
diff --git a/swan-lake/by-example/retry-transaction-statement/content.jsx b/swan-lake/by-example/retry-transaction-statement/content.jsx
index 7a7853d4a62..5b5ee978ab8 100644
--- a/swan-lake/by-example/retry-transaction-statement/content.jsx
+++ b/swan-lake/by-example/retry-transaction-statement/content.jsx
@@ -68,7 +68,7 @@ export function RetryTransactionStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/retry-transaction-statement",
diff --git a/swan-lake/by-example/rollback/content.jsx b/swan-lake/by-example/rollback/content.jsx
index c454734849e..47998045aa3 100644
--- a/swan-lake/by-example/rollback/content.jsx
+++ b/swan-lake/by-example/rollback/content.jsx
@@ -114,7 +114,7 @@ export function Rollback({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/rollback",
diff --git a/swan-lake/by-example/run-strands-safely-on-separate-threads/content.jsx b/swan-lake/by-example/run-strands-safely-on-separate-threads/content.jsx
index a45271179ef..3057e64d220 100644
--- a/swan-lake/by-example/run-strands-safely-on-separate-threads/content.jsx
+++ b/swan-lake/by-example/run-strands-safely-on-separate-threads/content.jsx
@@ -94,7 +94,7 @@ export function RunStrandsSafelyOnSeparateThreads({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/run-strands-safely-on-separate-threads",
diff --git a/swan-lake/by-example/sequence-diagrams/content.jsx b/swan-lake/by-example/sequence-diagrams/content.jsx
index 9f1cdc65708..e2f3e6fe493 100644
--- a/swan-lake/by-example/sequence-diagrams/content.jsx
+++ b/swan-lake/by-example/sequence-diagrams/content.jsx
@@ -64,7 +64,7 @@ export function SequenceDiagrams({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/sequence-diagrams",
diff --git a/swan-lake/by-example/single-use-of-typed-binding/content.jsx b/swan-lake/by-example/single-use-of-typed-binding/content.jsx
index 07e48d61e2b..f11b71c5310 100644
--- a/swan-lake/by-example/single-use-of-typed-binding/content.jsx
+++ b/swan-lake/by-example/single-use-of-typed-binding/content.jsx
@@ -64,7 +64,7 @@ export function SingleUseOfTypedBinding({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/single-use-of-typed-binding",
diff --git a/swan-lake/by-example/single-use-with-on-fail-clause/content.jsx b/swan-lake/by-example/single-use-with-on-fail-clause/content.jsx
index 6f06b66fa27..8d6fd92bda5 100644
--- a/swan-lake/by-example/single-use-with-on-fail-clause/content.jsx
+++ b/swan-lake/by-example/single-use-with-on-fail-clause/content.jsx
@@ -47,7 +47,7 @@ export function SingleUseWithOnFailClause({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/single-use-with-on-fail-clause",
diff --git a/swan-lake/by-example/sort-iterable-objects/content.jsx b/swan-lake/by-example/sort-iterable-objects/content.jsx
index 3245ed62d80..38aa82cd697 100644
--- a/swan-lake/by-example/sort-iterable-objects/content.jsx
+++ b/swan-lake/by-example/sort-iterable-objects/content.jsx
@@ -74,7 +74,7 @@ export function SortIterableObjects({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/sort-iterable-objects",
diff --git a/swan-lake/by-example/strands/content.jsx b/swan-lake/by-example/strands/content.jsx
index 5ba55359778..fb3de1e0d86 100644
--- a/swan-lake/by-example/strands/content.jsx
+++ b/swan-lake/by-example/strands/content.jsx
@@ -68,7 +68,7 @@ export function Strands({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/strands",
diff --git a/swan-lake/by-example/stream-type/content.jsx b/swan-lake/by-example/stream-type/content.jsx
index 028af88e153..89b641f1a54 100644
--- a/swan-lake/by-example/stream-type/content.jsx
+++ b/swan-lake/by-example/stream-type/content.jsx
@@ -69,7 +69,7 @@ export function StreamType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/stream-type",
diff --git a/swan-lake/by-example/strings/content.jsx b/swan-lake/by-example/strings/content.jsx
index b4ac34e5d83..cc4e5332648 100644
--- a/swan-lake/by-example/strings/content.jsx
+++ b/swan-lake/by-example/strings/content.jsx
@@ -55,7 +55,7 @@ export function Strings({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/strings",
diff --git a/swan-lake/by-example/structured-keys/content.jsx b/swan-lake/by-example/structured-keys/content.jsx
index 09563897119..2b2d93fd85a 100644
--- a/swan-lake/by-example/structured-keys/content.jsx
+++ b/swan-lake/by-example/structured-keys/content.jsx
@@ -61,7 +61,7 @@ export function StructuredKeys({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/structured-keys",
diff --git a/swan-lake/by-example/synchronize-message-passing/content.jsx b/swan-lake/by-example/synchronize-message-passing/content.jsx
index cb9761db706..e3078be5f4c 100644
--- a/swan-lake/by-example/synchronize-message-passing/content.jsx
+++ b/swan-lake/by-example/synchronize-message-passing/content.jsx
@@ -67,7 +67,7 @@ export function SynchronizeMessagePassing({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/synchronize-message-passing",
diff --git a/swan-lake/by-example/table-types/content.jsx b/swan-lake/by-example/table-types/content.jsx
index c761b874a64..8b931c35b15 100644
--- a/swan-lake/by-example/table-types/content.jsx
+++ b/swan-lake/by-example/table-types/content.jsx
@@ -85,7 +85,7 @@ export function TableTypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/table-types",
diff --git a/swan-lake/by-example/table/content.jsx b/swan-lake/by-example/table/content.jsx
index 3fe8fec2a50..87c1a961ebe 100644
--- a/swan-lake/by-example/table/content.jsx
+++ b/swan-lake/by-example/table/content.jsx
@@ -76,7 +76,7 @@ export function Table({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/table",
diff --git a/swan-lake/by-example/task-frequency-job-execution/content.jsx b/swan-lake/by-example/task-frequency-job-execution/content.jsx
index ca5a9125050..d13b9b4b862 100644
--- a/swan-lake/by-example/task-frequency-job-execution/content.jsx
+++ b/swan-lake/by-example/task-frequency-job-execution/content.jsx
@@ -72,7 +72,7 @@ export function TaskFrequencyJobExecution({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/task-frequency-job-execution",
diff --git a/swan-lake/by-example/task-one-time-job-execution/content.jsx b/swan-lake/by-example/task-one-time-job-execution/content.jsx
index fad26489e01..01a840bb425 100644
--- a/swan-lake/by-example/task-one-time-job-execution/content.jsx
+++ b/swan-lake/by-example/task-one-time-job-execution/content.jsx
@@ -76,7 +76,7 @@ export function TaskOneTimeJobExecution({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/task-one-time-job-execution",
diff --git a/swan-lake/by-example/temp-files-directories/content.jsx b/swan-lake/by-example/temp-files-directories/content.jsx
index 5359ad8083b..757c25802de 100644
--- a/swan-lake/by-example/temp-files-directories/content.jsx
+++ b/swan-lake/by-example/temp-files-directories/content.jsx
@@ -57,7 +57,7 @@ export function TempFilesDirectories({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/temp-files-directories",
diff --git a/swan-lake/by-example/time-formatting-and-parsing/content.jsx b/swan-lake/by-example/time-formatting-and-parsing/content.jsx
index 9bfc9c60783..8fb7f2ef0b8 100644
--- a/swan-lake/by-example/time-formatting-and-parsing/content.jsx
+++ b/swan-lake/by-example/time-formatting-and-parsing/content.jsx
@@ -83,7 +83,7 @@ export function TimeFormattingAndParsing({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/time-formatting-and-parsing",
diff --git a/swan-lake/by-example/time-utc-and-civil/content.jsx b/swan-lake/by-example/time-utc-and-civil/content.jsx
index 25945a4b4f5..7b2696163ed 100644
--- a/swan-lake/by-example/time-utc-and-civil/content.jsx
+++ b/swan-lake/by-example/time-utc-and-civil/content.jsx
@@ -69,7 +69,7 @@ export function TimeUtcAndCivil({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/time-utc-and-civil",
diff --git a/swan-lake/by-example/time-utc/content.jsx b/swan-lake/by-example/time-utc/content.jsx
index 2a33131867d..7fc46ab7fd7 100644
--- a/swan-lake/by-example/time-utc/content.jsx
+++ b/swan-lake/by-example/time-utc/content.jsx
@@ -55,7 +55,7 @@ export function TimeUtc({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/time-utc",
diff --git a/swan-lake/by-example/transaction-statement/content.jsx b/swan-lake/by-example/transaction-statement/content.jsx
index 02a61e5b401..89ee1bf9700 100644
--- a/swan-lake/by-example/transaction-statement/content.jsx
+++ b/swan-lake/by-example/transaction-statement/content.jsx
@@ -63,7 +63,7 @@ export function TransactionStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/transaction-statement",
diff --git a/swan-lake/by-example/transactional-named-workers/content.jsx b/swan-lake/by-example/transactional-named-workers/content.jsx
index 15819c218f4..08c908d2b13 100644
--- a/swan-lake/by-example/transactional-named-workers/content.jsx
+++ b/swan-lake/by-example/transactional-named-workers/content.jsx
@@ -62,7 +62,7 @@ export function TransactionalNamedWorkers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/transactional-named-workers",
diff --git a/swan-lake/by-example/transactional-qualifier/content.jsx b/swan-lake/by-example/transactional-qualifier/content.jsx
index f79756e85d5..7779fcf833e 100644
--- a/swan-lake/by-example/transactional-qualifier/content.jsx
+++ b/swan-lake/by-example/transactional-qualifier/content.jsx
@@ -76,7 +76,7 @@ export function TransactionalQualifier({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/transactional-qualifier",
diff --git a/swan-lake/by-example/tuples/content.jsx b/swan-lake/by-example/tuples/content.jsx
index 6dda7e168a7..28c8e6f605e 100644
--- a/swan-lake/by-example/tuples/content.jsx
+++ b/swan-lake/by-example/tuples/content.jsx
@@ -73,7 +73,7 @@ export function Tuples({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/tuples",
diff --git a/swan-lake/by-example/type-definitions/content.jsx b/swan-lake/by-example/type-definitions/content.jsx
index f2e3f634e45..3ee1edfdf53 100644
--- a/swan-lake/by-example/type-definitions/content.jsx
+++ b/swan-lake/by-example/type-definitions/content.jsx
@@ -47,7 +47,7 @@ export function TypeDefinitions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/type-definitions",
diff --git a/swan-lake/by-example/type-inclusion-for-records/content.jsx b/swan-lake/by-example/type-inclusion-for-records/content.jsx
index 4786065dc30..52c1f1ce5fa 100644
--- a/swan-lake/by-example/type-inclusion-for-records/content.jsx
+++ b/swan-lake/by-example/type-inclusion-for-records/content.jsx
@@ -64,7 +64,7 @@ export function TypeInclusionForRecords({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/type-inclusion-for-records",
diff --git a/swan-lake/by-example/type-inference/content.jsx b/swan-lake/by-example/type-inference/content.jsx
index 5d968e08cee..4ff37f68812 100644
--- a/swan-lake/by-example/type-inference/content.jsx
+++ b/swan-lake/by-example/type-inference/content.jsx
@@ -63,7 +63,7 @@ export function TypeInference({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/type-inference",
diff --git a/swan-lake/by-example/typed-binding-pattern/content.jsx b/swan-lake/by-example/typed-binding-pattern/content.jsx
index 2d3b63c4823..e4d71244db8 100644
--- a/swan-lake/by-example/typed-binding-pattern/content.jsx
+++ b/swan-lake/by-example/typed-binding-pattern/content.jsx
@@ -62,7 +62,7 @@ export function TypedBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/typed-binding-pattern",
diff --git a/swan-lake/by-example/typedesc-type/content.jsx b/swan-lake/by-example/typedesc-type/content.jsx
index 54ccdb1ea7b..e2b64916636 100644
--- a/swan-lake/by-example/typedesc-type/content.jsx
+++ b/swan-lake/by-example/typedesc-type/content.jsx
@@ -58,7 +58,7 @@ export function TypedescType({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/typedesc-type",
diff --git a/swan-lake/by-example/unions/content.jsx b/swan-lake/by-example/unions/content.jsx
index 8892ca315a1..3f4b5c91d11 100644
--- a/swan-lake/by-example/unions/content.jsx
+++ b/swan-lake/by-example/unions/content.jsx
@@ -71,7 +71,7 @@ export function Unions({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/unions",
diff --git a/swan-lake/by-example/url-encode-decode/content.jsx b/swan-lake/by-example/url-encode-decode/content.jsx
index 3ba2430d2d0..92c393a528c 100644
--- a/swan-lake/by-example/url-encode-decode/content.jsx
+++ b/swan-lake/by-example/url-encode-decode/content.jsx
@@ -53,7 +53,7 @@ export function UrlEncodeDecode({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/url-encode-decode",
diff --git a/swan-lake/by-example/uuid-generation/content.jsx b/swan-lake/by-example/uuid-generation/content.jsx
index 00547f06126..312e05fff85 100644
--- a/swan-lake/by-example/uuid-generation/content.jsx
+++ b/swan-lake/by-example/uuid-generation/content.jsx
@@ -88,7 +88,7 @@ export function UuidGeneration({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/uuid-generation",
diff --git a/swan-lake/by-example/uuid-operations/content.jsx b/swan-lake/by-example/uuid-operations/content.jsx
index d7bc874f8b1..2c5787fc530 100644
--- a/swan-lake/by-example/uuid-operations/content.jsx
+++ b/swan-lake/by-example/uuid-operations/content.jsx
@@ -89,7 +89,7 @@ export function UuidOperations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/uuid-operations",
diff --git a/swan-lake/by-example/variables-and-types/content.jsx b/swan-lake/by-example/variables-and-types/content.jsx
index dfce933b04f..d06aa3fc227 100644
--- a/swan-lake/by-example/variables-and-types/content.jsx
+++ b/swan-lake/by-example/variables-and-types/content.jsx
@@ -45,7 +45,7 @@ export function VariablesAndTypes({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/variables-and-types",
diff --git a/swan-lake/by-example/visibility-of-object-fields-and-methods/content.jsx b/swan-lake/by-example/visibility-of-object-fields-and-methods/content.jsx
index fd7266456f7..1f562ba5bd6 100644
--- a/swan-lake/by-example/visibility-of-object-fields-and-methods/content.jsx
+++ b/swan-lake/by-example/visibility-of-object-fields-and-methods/content.jsx
@@ -110,7 +110,7 @@ export function VisibilityOfObjectFieldsAndMethods({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/visibility-of-object-fields-and-methods",
diff --git a/swan-lake/by-example/waiting-for-workers/content.jsx b/swan-lake/by-example/waiting-for-workers/content.jsx
index e662a47f378..06bd70f4fe4 100644
--- a/swan-lake/by-example/waiting-for-workers/content.jsx
+++ b/swan-lake/by-example/waiting-for-workers/content.jsx
@@ -53,7 +53,7 @@ export function WaitingForWorkers({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/waiting-for-workers",
diff --git a/swan-lake/by-example/while-statement/content.jsx b/swan-lake/by-example/while-statement/content.jsx
index 298ce652bb5..006ce997ecb 100644
--- a/swan-lake/by-example/while-statement/content.jsx
+++ b/swan-lake/by-example/while-statement/content.jsx
@@ -47,7 +47,7 @@ export function WhileStatement({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/while-statement",
diff --git a/swan-lake/by-example/wildcard-binding-pattern/content.jsx b/swan-lake/by-example/wildcard-binding-pattern/content.jsx
index ab3b3664bcf..36f2a0e1031 100644
--- a/swan-lake/by-example/wildcard-binding-pattern/content.jsx
+++ b/swan-lake/by-example/wildcard-binding-pattern/content.jsx
@@ -50,7 +50,7 @@ export function WildcardBindingPattern({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/wildcard-binding-pattern",
diff --git a/swan-lake/by-example/xml-access/content.jsx b/swan-lake/by-example/xml-access/content.jsx
index fb3bb590418..fc289bb20e5 100644
--- a/swan-lake/by-example/xml-access/content.jsx
+++ b/swan-lake/by-example/xml-access/content.jsx
@@ -88,7 +88,7 @@ export function XmlAccess({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-access",
diff --git a/swan-lake/by-example/xml-data-model/content.jsx b/swan-lake/by-example/xml-data-model/content.jsx
index cf205eae478..2a39a3db82b 100644
--- a/swan-lake/by-example/xml-data-model/content.jsx
+++ b/swan-lake/by-example/xml-data-model/content.jsx
@@ -169,7 +169,7 @@ export function XmlDataModel({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-data-model",
diff --git a/swan-lake/by-example/xml-from-json-conversion/content.jsx b/swan-lake/by-example/xml-from-json-conversion/content.jsx
index f15d6be5dce..98d00759e3d 100644
--- a/swan-lake/by-example/xml-from-json-conversion/content.jsx
+++ b/swan-lake/by-example/xml-from-json-conversion/content.jsx
@@ -59,7 +59,7 @@ export function XmlFromJsonConversion({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-from-json-conversion",
diff --git a/swan-lake/by-example/xml-from-record-conversion/content.jsx b/swan-lake/by-example/xml-from-record-conversion/content.jsx
index c3fe959c9c9..0e6ac666588 100644
--- a/swan-lake/by-example/xml-from-record-conversion/content.jsx
+++ b/swan-lake/by-example/xml-from-record-conversion/content.jsx
@@ -81,7 +81,7 @@ export function XmlFromRecordConversion({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-from-record-conversion",
diff --git a/swan-lake/by-example/xml-iteration/content.jsx b/swan-lake/by-example/xml-iteration/content.jsx
index f76d6bc0853..cae1e9ba61c 100644
--- a/swan-lake/by-example/xml-iteration/content.jsx
+++ b/swan-lake/by-example/xml-iteration/content.jsx
@@ -50,7 +50,7 @@ export function XmlIteration({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-iteration",
diff --git a/swan-lake/by-example/xml-mutation/content.jsx b/swan-lake/by-example/xml-mutation/content.jsx
index 0c08849e25a..6c36bdfcd25 100644
--- a/swan-lake/by-example/xml-mutation/content.jsx
+++ b/swan-lake/by-example/xml-mutation/content.jsx
@@ -49,7 +49,7 @@ export function XmlMutation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-mutation",
diff --git a/swan-lake/by-example/xml-namespaces/content.jsx b/swan-lake/by-example/xml-namespaces/content.jsx
index e8a9684b88a..9c036ff2a6d 100644
--- a/swan-lake/by-example/xml-namespaces/content.jsx
+++ b/swan-lake/by-example/xml-namespaces/content.jsx
@@ -48,7 +48,7 @@ export function XmlNamespaces({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-namespaces",
diff --git a/swan-lake/by-example/xml-navigation/content.jsx b/swan-lake/by-example/xml-navigation/content.jsx
index 28d28d6889c..d69ee28d8f4 100644
--- a/swan-lake/by-example/xml-navigation/content.jsx
+++ b/swan-lake/by-example/xml-navigation/content.jsx
@@ -82,7 +82,7 @@ export function XmlNavigation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-navigation",
diff --git a/swan-lake/by-example/xml-operations/content.jsx b/swan-lake/by-example/xml-operations/content.jsx
index 7e857caa4a9..863f3fcb0d3 100644
--- a/swan-lake/by-example/xml-operations/content.jsx
+++ b/swan-lake/by-example/xml-operations/content.jsx
@@ -56,7 +56,7 @@ export function XmlOperations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-operations",
diff --git a/swan-lake/by-example/xml-subtyping/content.jsx b/swan-lake/by-example/xml-subtyping/content.jsx
index cf33df56c23..f4298e72e0c 100644
--- a/swan-lake/by-example/xml-subtyping/content.jsx
+++ b/swan-lake/by-example/xml-subtyping/content.jsx
@@ -125,7 +125,7 @@ export function XmlSubtyping({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-subtyping",
diff --git a/swan-lake/by-example/xml-templates-and-query/content.jsx b/swan-lake/by-example/xml-templates-and-query/content.jsx
index 436216c4331..479b6ca220e 100644
--- a/swan-lake/by-example/xml-templates-and-query/content.jsx
+++ b/swan-lake/by-example/xml-templates-and-query/content.jsx
@@ -52,7 +52,7 @@ export function XmlTemplatesAndQuery({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-templates-and-query",
diff --git a/swan-lake/by-example/xml-templates/content.jsx b/swan-lake/by-example/xml-templates/content.jsx
index b6e80315553..9ee1ae725c7 100644
--- a/swan-lake/by-example/xml-templates/content.jsx
+++ b/swan-lake/by-example/xml-templates/content.jsx
@@ -55,7 +55,7 @@ export function XmlTemplates({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-templates",
diff --git a/swan-lake/by-example/xml-to-json-conversion/content.jsx b/swan-lake/by-example/xml-to-json-conversion/content.jsx
index 49a6c41f425..a84da44909e 100644
--- a/swan-lake/by-example/xml-to-json-conversion/content.jsx
+++ b/swan-lake/by-example/xml-to-json-conversion/content.jsx
@@ -59,7 +59,7 @@ export function XmlToJsonConversion({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-to-json-conversion",
diff --git a/swan-lake/by-example/xml-to-record-conversion/content.jsx b/swan-lake/by-example/xml-to-record-conversion/content.jsx
index 23a62fece90..48c665b2573 100644
--- a/swan-lake/by-example/xml-to-record-conversion/content.jsx
+++ b/swan-lake/by-example/xml-to-record-conversion/content.jsx
@@ -83,7 +83,7 @@ export function XmlToRecordConversion({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xml-to-record-conversion",
diff --git a/swan-lake/by-example/xmlns-declarations/content.jsx b/swan-lake/by-example/xmlns-declarations/content.jsx
index 22eddcdd0d6..183a4318c63 100644
--- a/swan-lake/by-example/xmlns-declarations/content.jsx
+++ b/swan-lake/by-example/xmlns-declarations/content.jsx
@@ -66,7 +66,7 @@ export function XmlnsDeclarations({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xmlns-declarations",
diff --git a/swan-lake/by-example/xslt-transformation/content.jsx b/swan-lake/by-example/xslt-transformation/content.jsx
index 848ee2b1783..d694d5414a9 100644
--- a/swan-lake/by-example/xslt-transformation/content.jsx
+++ b/swan-lake/by-example/xslt-transformation/content.jsx
@@ -103,7 +103,7 @@ export function XsltTransformation({ codeSnippets }) {
       >
         <Col className="d-flex align-items-start" sm={12}>
           <button
-            className="bg-transparent border-0 m-0 p-2"
+            className="bg-transparent border-0 m-0 p-2 ms-auto"
             onClick={() => {
               window.open(
                 "https://github.com/ballerina-platform/ballerina-distribution/tree/v2201.8.3/examples/xslt-transformation",