# Gui blocks layout misaligned
**URL:**
**Author:**  [@LittleWing](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FLittleWing)%5C
**Post date:** [October 7, 2022, 6:30pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgui-blocks-layout-misaligned%2F24117%2F1 "2022-10-07T18:30:58Z")
Hi,
any idea how to fix that button that it will fit nicely like the one above it?
Could you please tell me what I have missed?
here is my code:
```auto
with gr.Blocks(title = 'Switcher') as switches_ver:
gr.Markdown('Welcome to IPBlocker')
with gr.Tab(label = 'IPBlocker'):
with gr.Row():
ips_to_block = gr.Textbox(label = "IPs", lines = 10, placeholder=('Please fill Ips to block'))
output_textbox = gr.Textbox(label = "Results", lines=10)
with gr.Row():
block_btn = gr.Button('Block')
#output_file = gr.File('fortigate.txt')
block_btn.click(fn=block_ip, inputs = ips_to_block, outputs = output_textbox)
with gr.Tab(label = 'Switcher'):
with gr.Row():
with gr.Column():
switch_box = gr.Textbox(label = 'Switches', lines = 10, placeholder='Please fill switches IPs...')
show_ver = gr.Button('Show current switches version')
output_textbox = gr.Textbox(label='Results',lines = 10)
with gr.Row():
upgrade_ver = gr.Button('Upgrade selected switches')
output_file = gr.File(['switches_good_results.txt', 'switches_bad_results.txt'])
show_ver.click(fn=switch_ver, inputs = switch_box, outputs = [output_textbox, output_file])
upgrade_ver.click(fn=block_ip, inputs = ips_to_block, outputs=[output_textbox, output_file])
```
Thank you!
---
**Author:**  [@abidlabs](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fabidlabs)%5C
**Post date:** [October 13, 2022, 6:38pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgui-blocks-layout-misaligned%2F24117%2F2 "2022-10-13T18:38:30Z")
Hi there! It looks like the combination or `Rows()` and `Columns()` is causing this issue. What happens if you have the following code for the second tab:
```python
with gr.Tab(label = 'Switcher'):
with gr.Row():
with gr.Column():
switch_box = gr.Textbox(label = 'Switches', lines = 10, placeholder='Please fill switches IPs...')
show_ver = gr.Button('Show current switches version')
upgrade_ver = gr.Button('Upgrade selected switches')
with gr.Column():
output_textbox = gr.Textbox(label='Results',lines = 10)
output_file = gr.File(['switches_good_results.txt', 'switches_bad_results.txt'])
show_ver.click(fn=switch_ver, inputs = switch_box, outputs = [output_textbox, output_file])
upgrade_ver.click(fn=block_ip, inputs = ips_to_block, outputs=[output_textbox, output_file])
```
---
**Author:**  [@LittleWing](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FLittleWing)%5C
**Post date:** [October 14, 2022, 5:35am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgui-blocks-layout-misaligned%2F24117%2F3 "2022-10-14T05:35:14Z")
Hi @abidlabs
Thanks for the reply!
Yeah, it worked! it is way simpler than I thought, I tried many combination but nothing worked for me.
Just to understand right, if I create a 2nd:
> with gr.Column()
because its under the parent:
> with gr.Row():
It will create that column (the 2nd) next to the first one, to its right side?
Thank you and for the community very much!
---
**Author:**  [@abidlabs](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2Fabidlabs)%5C
**Post date:** [October 17, 2022, 5:15am UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgui-blocks-layout-misaligned%2F24117%2F4 "2022-10-17T05:15:04Z")
Yes that’s exactly it!
---
**Author:**  [@LittleWing](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Fu%2FLittleWing)%5C
**Post date:** [October 17, 2022, 12:48pm UTC](/static-proxy?url=https%3A%2F%2Fdiscuss.huggingface.co%2Ft%2Fgui-blocks-layout-misaligned%2F24117%2F5 "2022-10-17T12:48:38Z")
Thank you so much for your support! @abidlabs