Use columns plugin to render content in two columns:Before-and-after transition Action and its result Input and output Result comparison

To define two columns layout use fenced code block and left: and right: labels markdown ```columns left: this content goes to the left and can span multiple lines right: this content goes to the right and can span multiple lines ``` this content goes to the leftand can span multiple lines this content goes to the right and can span multiple lines

To define three columns layout use fenced code block and left: , middle: and right: labels markdown ```columns left: ### Pros {style: "api"} * Item One middle: ### Undecided {style: "api"} * Item Two * Item Three right: ### Cons {style: "api"} * Item Four ``` Pros Item One Undecided Item Two Item Three Cons Item Four

Size can be specified for a column as a portion . By default, both portions are assigned a value of 10 . If you specify right column portion to be 5 , then left will be left as 10 by default, leaving right side to be roughly 33% in size. http.get("/weather") { temperature.shouldBe < 100 } http.doc.capture("weather-example") ```columns {right: {portion: 5}} left: :include-groovy: org/testingisdocumenting/testing/examples/restapi/WebTauRestAPIGroovyTest.groovy { title: "WebTau REST API test example", entry: "weather", bodyOnly: true } right: :include-json: weather-example/response.json { title: "weather response example", highlightValueFile: "weather-example/paths.json" } ```

Use border to add a border separator between columns BeforeHello World AfterWorld Of Hellos ```columns {border: true} left: **Before** Hello World right: **After** World Of Hellos ```

Use align to change a column content alignment. BeforeHello World AfterWorld Of Hellos ```columns {border: true, left: {align: "right"}} left: **Before** Hello World right: **After** World Of Hellos ```

In Presentation Mode each column content will appear on slide transition