Merge pull request #51 from redpanda-data/JakeSCahill-patch-1

Document side-by-side code blocks

meta-docs/STYLE-GUIDE.adoc

@@ -440,6 +440,57 @@ Lines 1 through 2, line 5, lines 9 through 20
 
 For more details about code blocks, refer to link:https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#source-code[AsciiDoctor] documentation.
 
+==== Side-by-side code blocks
+
+You can display two code blocks adjacent to each other horizontally. This option is useful when you want to compare code snippets or demonstrate variations of a code example in a parallel view.
+
+To implement side-by-side code blocks, enclose the blocks you want to display with the `[.side-by-side]` attribute followed by `--` delimiters.
+
+For example:
+
+....
+
+[.side-by-side]
+--
+.Strimzi
+[source,yaml]
+----
+apiVersion: kafka.strimzi.io/v1beta2
+kind: KafkaTopic
+metadata:
+  name: my-topic <1>
+  labels:
+    strimzi.io/cluster: my-kafka-cluster <2>
+spec:
+  partitions: 3 <3>
+  replicas: 3 <4>
+----
+
+.Redpanda
+[source,yaml]
+----
+apiVersion: cluster.redpanda.com/v1alpha1
+kind: Topic
+metadata:
+  name: my-topic <1>
+spec:
+  kafkaApiSpec: <2>
+    brokers:
+      - "redpanda-0.redpanda.<namespace>.svc.cluster.local:9093"
+      - "redpanda-1.redpanda.<namespace>.svc.cluster.local:9093"
+      - "redpanda-2.redpanda.<namespace>.svc.cluster.local:9093"
+    tls:
+      caCertSecretRef:
+        name: "redpanda-default-cert"
+        key: "ca.crt"
+  partitions: 3 <3>
+  replicationFactor: 3 <4>
+----
+--
+....
+
+image::../images/side-by-side-code-block.png[]
+
 === Bold text
 
 Use bold text to indicate that a string is UI text. Do not use a bold font to emphasize a word or phrase.