How to have form with equal width fields without taking full page width

[smartm0use]

Hello, I'm building form like this:

As you can see I get different width for every type of input. I have tried to use equal width class but i get this:

It could be uncomfortable to use on large screen :(

Is there any clean way to have the following equal width fields form?

[ColinFrick]

You could use "Evenly Divided" forms https://fomantic-ui.com/collections/form.html#evenly-divided
https://jsfiddle.net/Lu2y5ecd/

[smartm0use]

Yes, I see the trick is to use three class even in case of having two fields.
Anyway it is not working as I mean: it is still taking the whole width of the page, and this could be not nice on large screen.

[GammaGames]

@smartm0use try putting it in a container

[smartm0use]

@smartm0use try putting it in a container

Uhm, thank you for your hint... but it is centered in the page...

[GammaGames]

Huh, I didn't realize you wanted it left aligned. You could just override the margin-left: auto !important rule in the container, or use something like a grid instead.

This might be an easy feature request as well, does anyone have any thoughts on a left or right "floated" container? The CSS might look something like:

.ui.container:not(.fluid) {
    width: 933px;
}
.ui.container:not(.left.floated) {
    margin-right: auto;
}
.ui.container:not(.right.floated) {
    margin-left: auto;
}

[smartm0use]

Yes, it could be a new feature for Fomantic-UI containers.
Thank you for your message.

[ko2in]

Closed since the issue seems to be resolved. Please create a separate issue if you've any feature request with that.