# Side by Side in a Container
**URL:** https://community.glideapps.com/t/side-by-side-in-a-container/62601
**Category:** Ask for Help
**Created:** [June 9, 2023, 3:33pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601 "2023-06-09T15:33:36Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@drascon](https://community.glideapps.com/u/drascon)
#### Post date: [June 9, 2023, 3:33pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/1 "2023-06-09T15:33:36Z")
If possible, I’d like to have a number component and a button side by side in a container but I’m not nearly as experienced inspecting my app as I should (would like) to be. It looks like the button won’t be an issue because it already permits auto-sizing but the number component is the tricky one. I don’t know what the stable component name / class is. Can someone please help?
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 9, 2023, 11:59pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/2 "2023-06-09T23:59:04Z")
So can you visualize what you want it to look like? Do you want less space between those components?
---
### Author:  [@drascon](https://community.glideapps.com/u/drascon)
#### Post date: [June 10, 2023, 8:01pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/3 "2023-06-10T20:01:18Z")
Ideally, I’d like the number input component to be less than half the size it currently is with the button inline, directly next to it, with a little bit of padding so it looks nice. Having two components, one on top of the other that span the width of the screen, isn’t very pleasing to the eye and is a waste of real estate. I was hoping that using a container with a 1:1 setting would solve the issue but after reading a few other posts, that apparently isn’t working for anyone when they use it for mobile 🤷♂️
---
### Author:  [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [June 10, 2023, 8:29pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/4 "2023-06-10T20:29:21Z")
The way I do it with Glide only is as follows… use a custom collection (grid layout) and a 2 row helper table. Label the rows 1 & 2 and add two components to the custom collection.
Filter the first component when helper table row = 1 and the second component when helper table row = 2
There’s no one size fits all so I duplicate the collection and use some visibility filters based on device info.
Edit: that would give you two components side by side on mobile but they wouldn’t be in a container 🤔
---
### Author:  [@drascon](https://community.glideapps.com/u/drascon)
#### Post date: [June 10, 2023, 8:43pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/5 "2023-06-10T20:43:02Z")
Thanks Eric -
The thought behind using a container was simply because it is supposed to natively allow a 1:1 layout without any CSS or HTML trickery but that doesn’t seem to be the case in this instance. I’ll give your suggestion a try and see if it works!
---
### Author:  [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [June 10, 2023, 9:02pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/6 "2023-06-10T21:02:10Z")
Hmmm it doesn’t want to cooperate with the number entry…
I got it to look nice with some date pickers though so thought it should work 🤷♂️
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 10, 2023, 11:10pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/7 "2023-06-10T23:10:12Z")
> [@drascon](#):
>
> but after reading a few other posts, that apparently isn’t working for anyone when they use it for mobile
Yeah, I agree with this. In cases where things look bad on mobile with a desktop design, I have to duplicate my container and redesign those, then use visibility conditions accordingly (based on the device width). I hope it would be more responsive.
---
### Author:  [@drascon](https://community.glideapps.com/u/drascon)
#### Post date: [June 12, 2023, 2:14pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/8 "2023-06-12T14:14:11Z")
This is what I noticed as well. Bummer 👎
---
### Author:  [@drascon](https://community.glideapps.com/u/drascon)
#### Post date: [June 12, 2023, 2:15pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/9 "2023-06-12T14:15:57Z")
Thanks for this, @ThinhDinh. I thought it was user error for a minute.
---
### Author:  [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [June 12, 2023, 2:37pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/10 "2023-06-12T14:37:47Z")
> [@ThinhDinh](#):
>
> based on the device width
Oooooh I’ve been using ‘includes mobile’
What device width would you recommend?
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 12, 2023, 10:51pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/11 "2023-06-12T22:51:13Z")
I’m not entirely sure it would work for all devices, but I’m currently setting anything under 600 as “mobile”, otherwise I show a desktop version.
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 13, 2023, 9:07pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/12 "2023-06-13T21:07:33Z")
Hello!
Thanks for posting this and I think you replied to me with this answer before but I can’t find that post!
Anyway, I have a question:
Assuming my Components area is blank start off: Would I be adding 1 Container from Layout and putting two Grid tables in it? Or choosing Custom from Collections and adding a grid there? (or neither, lol)
Thanks!
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 13, 2023, 11:51pm UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/13 "2023-06-13T23:51:20Z")
What do you want to achieve in your end result though? What does your data structure look like?
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 14, 2023, 12:20am UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/14 "2023-06-14T00:20:53Z")
I’m not sure I understand the question.
In terms of user interface, what I create should mimic this form as closely as possible.
Once the data is entered they’ll be pointed to a “summary page” that they can screen shot.
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 14, 2023, 1:09am UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/15 "2023-06-14T01:09:34Z")
What is “this form” you are talking about? Is it the form in Eric’s comment?
> [@Eric\_Penn](#):
>
> The way I do it with Glide only is as follows… use a custom collection (grid layout) and a 2 row helper table. Label the rows 1 & 2 and add two components to the custom collection.
>
> Filter the first component when helper table row = 1 and the second component when helper table row = 2
I think this is the setup.
---
### Author:  [@JamieErvin](https://community.glideapps.com/u/JamieErvin)
#### Post date: [June 15, 2023, 12:44am UTC](https://community.glideapps.com/t/side-by-side-in-a-container/62601/16 "2023-06-15T00:44:59Z")
Sorry about that, I got my comments crossed up.