import * as React from 'react' ; import styled from 'styled-components' ; import { FONT_WEIGHT_SEMIBOLD } from '@opentrons/components' ; export interface FormRowProps { label : string ; labelFor : string ; children : React . ReactNode ; } const StyledRow = styled . div `
  display: table-row;
` ; const StyledLabel = styled . label `
  display: table-cell;
  padding-right: 1rem;
  text-align: right;
  font-weight: ${ FONT_WEIGHT_SEMIBOLD };
` ; const StyledInputWrapper = styled . div `
  padding-bottom: 0.75rem;
  display: table-cell;

  & > *:not(:last-child) {
    margin-bottom: 0.25rem;
  }
` ; export const FormRow = ( props ) : JSX . Element => { const { label , labelFor , children } = props ; return ( < StyledRow > < StyledLabel htmlFor = { labelFor } > { label } < /StyledLabel> < StyledInputWrapper > { children } < /StyledInputWrapper> < /StyledRow>); } ;