# 2-Column Layout and Half-Width Fields for Calculator

**URL:** <https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015>\
**Category:** Calculator\
**Tags:** Gathering-Feedback\
**Created:** [June 19, 2025, 2:47pm UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015 "2025-06-19T14:47:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yavuz\_Yavuzer\_II](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/yavuz_yavuzer_ii/32/48419_2.png) [@Yavuz\_Yavuzer\_II](https://community.elfsight.com/u/Yavuz_Yavuzer_II)\
**Post date:** [June 19, 2025, 2:47pm UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015/1 "2025-06-19T14:47:24Z")

</div>

For general customizability and especially for calculators with many input fields, it would be helpful to have the option to change the input fields to a 2-column layout.

Added functionality to go with this would be width toggle for the fields that would switch them between full-width and half-width, while having the heading field used as a separator when the user doesn’t want two sequential half-width fields to appear on the same row, or just a new “separator” field that would move the fields below it to a new row.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 19, 2025, 5:13pm UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015/2 "2025-06-19T17:13:08Z")

</div>

Hey there, @Yavuz_Yavuzer_II and welcome to the Community 👋

Great idea, thanks for sharing! If more users get interested in this feature, we’ll try to think it over 🙂

As for now, could you please specify which field in your calculator you’d like to be half-width and displayed in 1 line? We’d be happy to come up with a custom solution for you!

---

<div class="post-metadata">

**Author:** ![Yavuz\_Yavuzer\_II](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/yavuz_yavuzer_ii/32/48419_2.png) [@Yavuz\_Yavuzer\_II](https://community.elfsight.com/u/Yavuz_Yavuzer_II)\
**Post date:** [June 19, 2025, 7:21pm UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015/3 "2025-06-19T19:21:24Z")

</div>

Thanks for the response! Dropdowns and number entry fields would be the most useful for me personally. Sliders at half width may be too squished.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 20, 2025, 11:12am UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015/4 "2025-06-20T11:12:08Z")

</div>

Got it, thanks!

I see that currently you have 4 Calculator widgets. Could you please specify the name(s) of the widget(s), where you’d like to apply these changes?

---

<div class="post-metadata">

**Author:** ![Yavuz\_Yavuzer\_II](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/yavuz_yavuzer_ii/32/48419_2.png) [@Yavuz\_Yavuzer\_II](https://community.elfsight.com/u/Yavuz_Yavuzer_II)\
**Post date:** [June 20, 2025, 2:25pm UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015/5 "2025-06-20T14:25:57Z")

</div>

“Pool Heater Calculator” is the one I would need it most with. Is there a CSS selector for the divs of the different field types? Currently in inspect i only see one unified one, but not sure if im missing something.

The simplest implementation IMO would be a little JS toggle inside the field details that applies a half-width class or something like that.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 20, 2025, 3:37pm UTC](https://community.elfsight.com/t/2-column-layout-and-half-width-fields-for-calculator/127015/6 "2025-06-20T15:37:44Z")

</div>

I agree that the toggle option for width (like in our Forms) would be a great addition! We’ll try to think it over in the future updates 🙂

You’re right, the fields have the same class and the only solution to target a specific field is to use `:nth-child(field_number)` right after the class name.

I see that you have only 2 dropdowns next to each other and here is the CSS code to display them in 1 line:

```auto
[class*="FormFieldLayout__Container-sc"]:nth-child(16) {
  width: calc(54% - 4px);
  display: inline-block;
}

[class*="FormFieldLayout__Container-sc"]:nth-child(15) {
  margin-right: 8px; 
    width: calc(46% - 4px);
  display: inline-block;
}

```

  

Please check it out and let me know if you like the result 🙂