diff --git a/src/manipulations/components/Append.svelte b/src/manipulations/components/Append.svelte
index 3777c31..26fd0d1 100644
--- a/src/manipulations/components/Append.svelte
+++ b/src/manipulations/components/Append.svelte
@@ -14,3 +14,11 @@
 <div>
   <span>Suffix </span><input bind:value={suffix} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/manipulations/components/Compose.svelte b/src/manipulations/components/Compose.svelte
index b9c9db1..5386f42 100644
--- a/src/manipulations/components/Compose.svelte
+++ b/src/manipulations/components/Compose.svelte
@@ -15,3 +15,11 @@
 <div>
   <span>Replace placeholder</span> <input bind:value={placeholder}> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Prepend.svelte b/src/manipulations/components/Prepend.svelte
index 35d97fb..6ec9683 100644
--- a/src/manipulations/components/Prepend.svelte
+++ b/src/manipulations/components/Prepend.svelte
@@ -15,3 +15,11 @@
   <span>Prefix </span><input bind:value={prefix} />
 </div>
 
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
+
diff --git a/src/manipulations/components/Replace.svelte b/src/manipulations/components/Replace.svelte
index 561e192..f832838 100644
--- a/src/manipulations/components/Replace.svelte
+++ b/src/manipulations/components/Replace.svelte
@@ -15,3 +15,12 @@
 <div>
   <span>Replace from</span> <input bind:value={from} /> <span>to</span> <input bind:value={to} />
 </div>
+
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Slice.svelte b/src/manipulations/components/Slice.svelte
index 90debd6..ddf13fc 100644
--- a/src/manipulations/components/Slice.svelte
+++ b/src/manipulations/components/Slice.svelte
@@ -15,3 +15,11 @@
 <div>
   <span>Slice from</span> <input bind:value={start} type="number"/> <span>to</span> <input bind:value={end} type="number" /> 
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/SplitCompose.svelte b/src/manipulations/components/SplitCompose.svelte
index cbd3f51..4733317 100644
--- a/src/manipulations/components/SplitCompose.svelte
+++ b/src/manipulations/components/SplitCompose.svelte
@@ -14,5 +14,13 @@
 </script>
 
 <div>
-  <span>Split by</span> <input bind:value={splitString}/> <span> and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
+  <span>Split by</span> <input bind:value={splitString}/> <span>and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/SplitGetFromIndex.svelte b/src/manipulations/components/SplitGetFromIndex.svelte
index a768ce4..ce06772 100644
--- a/src/manipulations/components/SplitGetFromIndex.svelte
+++ b/src/manipulations/components/SplitGetFromIndex.svelte
@@ -13,5 +13,13 @@
 </script>
 
 <div>
-  <span>Split by </span><input bind:value={splitString} /><span>, get from </span><input bind:value={index} />
+  <span>Split by </span><input bind:value={splitString} /><span>get from </span><input bind:value={index} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>