How to render components side by side

Question

I have the following output:

And this is the code in the render method:

return (
  <div>
    <div>
      <TextMedium fontSize="15px" text="Number" />
      <Select options={[{ label: 'AreaCode', value: 'AreaCode' }]} />
    </div>
    <div>
      <TInput placeholder={daytimePhoneNumber} />
    </div>
  </div>
);

It composes of custom components. I am trying to style them so that they are all side by side and that the TextMedium component should take half the space and the remaining space should be split equally between the two components.. essentially 50% to TextMedium, 25% to both Select and TInput.

I tried styling it but nothing seems to be working.

Answer 1

you can use bootstrap for layout alignment or styling the outer div {display:flex; flex-direction:row;} {display:flex; flex-direction:row;} ,

return (
  <div style={display:flex; flex-direction:row;}>
    <div>
      <TextMedium fontSize="15px" text="Number" />
      <Select options={[{ label: 'AreaCode', value: 'AreaCode' }]} />
    </div>
    <div>
      <TInput placeholder={daytimePhoneNumber} />
    </div>
  </div>
);

Answer 2

Use flex layout, like this:

  return (
    <Container
      style={{
        display: 'flex'
      }}>
      <Text
        style={{
          width: '50%'
        }}
      />
      <Select
        style={{
          width: '25%'
        }}
      />
      <Input
        style={{
          width: '25%'
        }}
      />
    </Container>
  );

Answer 3

You can use display: 'flex' and flexDirection: 'row' CSS options to display the divs in row. Here is the sample code for displaying controls in row.

<div style={{
      display: 'flex',
      flexDirection: 'row',
      width: '100%',
      backgroundColor: 'lightGrey',
    }}>
      <div style={{ width: '50%' }}>
        <label style={{width: '100%'}}>Number</label>
      </div>
      <div style={{ width: '25%' }}>
        <select style={{width: '100%'}}>
          <option value="AreaCode">AreaCode</option>
        </select>
      </div>
      <div style={{ width: '25%' }}>
        <input style={{width: '100%'}} type="text" value="2343434" />
      </div>
    </div>

Working codesandbox here