To split Jupyterlab or Jupyter Notebook Markdown output into two columns you can use:

import ipywidgets as widgets
from IPython.display import display, Markdown, Latex

md1 = "*some markdown Text1*  \n ## Example 1 \n You can read more about linux automation and datascience \n\n First you need to"
md2 = "*some markdown Text2* \n ## Example 2 \n We saw how to split dataframe into chunks\n\n After that you can"

output1 = widgets.Output()
with output1:
    display(Markdown(md1))
    
output2 = widgets.Output()
with output2:
    display(Markdown(md2))

two_columns = widgets.HBox([output1, output2])
display(two_columns)

1. Why Split Output in Jupyter Notebook?

By default, Jupyter Notebook displays output in a single column. Splitting output into two columns can help with:

  • Comparing documentation side by side
  • Verifying data integrity
  • Improving readability of large outputs

2. Using display and HTML

You can use the following method to organize output into two columns using HTML and CSS:

output1 = widgets.Output()
with output1:
    display(Markdown(md1))
    
output2 = widgets.Output()
with output2:
    display(Markdown(md2))

two_columns = widgets.HBox([output1, output2])
display(two_columns)

How the code works:

  • Imports modules: ipywidgets for widgets, IPython.display for rendering Markdown.
  • Define Markdown content: md1 and md2 store Markdown text with headings and formatting.
  • Create output widgets: widgets.Output() initializes separate display areas.
  • Populate widgets: with output1: and with output2: use display(Markdown(...)) to add content.
  • Arrange in two columns: widgets.HBox([output1, output2]) places outputs side by side.
  • Display layout: display(two_columns) renders the two-column structure in Jupyter Notebook.

3. Displaying Pandas DataFrames Side by Side

To show two DataFrames in two columns:

import pandas as pd

df1 = pd.DataFrame({"A": [1, 2], "B": [3, 4]})
df2 = pd.DataFrame({"X": [5, 6], "Y": [7, 8]})

html_content = f"""
<div style='display: flex;'>
    <div style='width: 50%; padding: 10px;'>{df1.to_html()}</div>
    <div style='width: 50%; padding: 10px;'>{df2.to_html()}</div>
</div>
"""
display(HTML(html_content))

result:

A B
0 1 3
1 2 4
X Y
0 5 7
1 6 8

4. Conclusion

Splitting Jupyter Notebook output into two columns improves organization and readability. Use display and HTML for structured layouts, making comparisons easier and enhancing data visualization.

For more on Jupyter Notebook styling, check the official Jupyter documentation.

Resources