Flex CSS not generated with embed code

Community resources General
#1

Hi people:
I produced a page that has a form to allow users to play around with different pricing options: cost and margin. JavaScript updates values in the form as the user enters the values. All that works fine but…
To generate the form elements and the “onchange” event handler I needed to use an embed that allowed the page to insert the form elements when the page loaded. The HTML elements use the same classes as the Webflow generated classes. (I picked these up inspecting the page in the browser with Chrome tool).
However the Weflow generated form elements in a div styled “formPair” appear side by side in a flex box. But the embed generated form elements in a

also styled “formPair” are NOT flex and are stacked and NOT in a flex box. I’ve attached a screen shot of the differences.

I’d like all the form elements to appear side by side identically

link to project: Webflow - David's Cool Project

CSS problem
CSS problem1307×667 221 KB

#2

I was able to get this sorted by inserting CSS style code into the header area of the page.

.formPair { display: flex; flex-direction: row; } .artFormLabel { width: 330px; }

I can’t say why it was necessary to do this and why when the page loaded the native CSS was not implemented. Bug? Feature? Don’t know but hope that helps someone.