I have the following script

from ipywidgets import Checkbox, Text, HBox, VBox, Layout, HTML
from IPython.display import display

checkbox = Checkbox(layout=Layout(width='8%', align_self='center'))
text_field = Text(layout=Layout(width='20%'))
header_row = HBox([
    HTML(value="<b>Checkbox</b>", layout=Layout(width='8%', text_align='center')),
    HTML(value="<b>Text Field</b>", layout=Layout(width='20%', text_align='center'))
])
row = HBox([checkbox, text_field], layout=Layout(align_items='center'))
ui = VBox([header_row, row])
display(ui)

I would expect this to return a column like structure, with a checkbox next to a text box. However, the result looks like this:

Why is my checkbox being pushed to the right? How can we adjust our script so that it is displayed correctly?