Enable responsive docs side by side code snippet

Author: urmauur

docs/docs/features/chat.md

@@ -8,7 +8,7 @@ The Chat Completion feature in Nitro provides a flexible way to interact with an
 
 To send a single query to your chosen LLM, follow these steps:
 
-<div style={{ width: '50%', float: 'left', clear: 'left' }}>
+<div class="code-snippet-left">
 
 ```bash title="Nitro"
 curl http://localhost:3928/v1/chat/completions \
@@ -27,7 +27,7 @@ curl http://localhost:3928/v1/chat/completions \
 
 </div>
 
-<div style={{ width: '50%', float: 'right', clear: 'right' }}>
+<div class="code-snippet-right">
 
 ```bash title="OpenAI"
 curl https://api.openai.com/v1/chat/completions \
@@ -52,7 +52,7 @@ This command sends a request to your local LLM, querying about the winner of the
 
 For ongoing conversations or multiple queries, the dialog request feature is ideal. Here’s how to structure a multi-turn conversation:
 
-<div style={{ width: '50%', float: 'left', clear: 'left' }}>
+<div class="code-snippet-left">
 
 ```bash title="Nitro"
 curl http://localhost:3928/v1/chat/completions \
@@ -82,7 +82,7 @@ curl http://localhost:3928/v1/chat/completions \
 
 </div>
 
-<div style={{ width: '50%', float: 'right', clear: 'right' }}>
+<div class="code-snippet-right">
 
 ```bash title="OpenAI"
 curl https://api.openai.com/v1/chat/completions \
@@ -116,7 +116,7 @@ curl https://api.openai.com/v1/chat/completions \
 
 Below are examples of responses from both the Nitro server and OpenAI:
 
-<div style={{ width: '50%', float: 'left', clear: 'left' }}>
+<div class="code-snippet-left">
 
 ```js title="Nitro"
 {
@@ -145,7 +145,7 @@ Below are examples of responses from both the Nitro server and OpenAI:
 
 </div>
 
-<div style={{ width: '50%', float: 'right', clear: 'right' }}>
+<div class="code-snippet-right">
 
 ```js title="OpenAI"
 {

docs/docs/features/embed.md

@@ -14,7 +14,7 @@ To utilize the embedding feature, include the JSON parameter `"embedding": true`
 
 Here’s an example showing how to get the embedding result from the model:
 
-<div style={{ width: '50%', float: 'left', clear: 'left' }}>
+<div class="code-snippet-left">
 
 ```bash title="Nitro" {1}
 curl http://localhost:3928/v1/embeddings \
@@ -28,7 +28,7 @@ curl http://localhost:3928/v1/embeddings \
 ```
 
 </div>
-<div style={{ width: '50%', float: 'right', clear: 'right' }}>
+<div class="code-snippet-right">
 
 ```bash title="OpenAI request" {1}
 curl https://api.openai.com/v1/embeddings \
@@ -47,7 +47,7 @@ curl https://api.openai.com/v1/embeddings \
 
 The example response used the output from model [llama2 Chat 7B Q5 (GGUF)](https://huggingface.co/TheBloke/Llama-2-7B-Chat-GGUF/tree/main) loaded to Nitro server.
 
-<div style={{ width: '50%', float: 'left', clear: 'left' }}>
+<div class="code-snippet-left">
 
 ```js title="Nitro"
 {
@@ -68,7 +68,7 @@ The example response used the output from model [llama2 Chat 7B Q5 (GGUF)](https
 
 </div>
 
-<div style={{ width: '50%', float: 'right', clear: 'right' }}>
+<div class="code-snippet-right">
 
 ```js title="OpenAI"
 {

docs/docs/new/about.md

@@ -21,7 +21,7 @@ One of the significant advantages of using Nitro is its compatibility with OpenA
 
 For instance, compare the Nitro inference call:
 
-<div style={{ width: '50%', float: 'left', clear: 'left' }}>
+<div class="code-snippet-left">
 
 ```bash title="Nitro chat completion"
 curl http://localhost:3928/v1/chat/completions \
@@ -44,7 +44,7 @@ curl http://localhost:3928/v1/chat/completions \
 
 </div>
 
-<div style={{ width: '50%', float: 'right', clear: 'right' }}>
+<div class="code-snippet-right">
 
 ```bash title="OpenAI API chat completion"
 curl https://api.openai.com/v1/chat/completions \

docs/src/styles/components/base.scss

@@ -77,3 +77,11 @@
     }
   }
 }
+
+.code-snippet-left {
+  @apply w-full lg:w-1/2 float-left;
+}
+
+.code-snippet-right {
+  @apply w-full lg:w-1/2 float-right;
+}