I am attending to have 2 input boxes next to each other with text in between them. Something like this

[0...    ] < Ranking < [1000...]

However, the most I've been able to get is the two input boxes with no text in between. This is my code so far attending to put the text in between them.

return(
        <div className="two-col">
            <div className="col1">
                <input type={"text"} required={true} placeholder={"0..."} name={"id"}  onChange={update} />
            </div>
            <text> &lt; Ranking &lt; </text>
            <div className="col2">
                <input type={"text"} required={true} placeholder={"1000..."} name={"id"}  onChange={update} />
            </div>
        </div>
    );

And my CSS file

.two-col {
    overflow: hidden;/* Makes this div contain its floats */
}

.two-col .col1,
.two-col .col2 {
    width: 50%;
    background: #f2f2f2;
}

.two-col .col1 {
    float: left;
}

.two-col .col2 {
    float: right;
}

Any help is much appreciated.

CodePudding user response：

<div className={'container'}>
  <div className={'col'}>
    <input type={'text'} required={true} placeholder={'0...'} name={'id'} onChange={update} />
  </div>
  <div className={'col'}> &lt; Ranking &lt; </div>
  <div className={'col'}>
    <input type={'text'} required={true} placeholder={'...1000'} name={'id'} onChangeonChange={update} />
  </div>
</div>

Using flex

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

You can have more control over the row using display: grid (not as well supported as flexbox).

EDIT: graph container

<div className={"container"}>
  <div className={"container inputs"}>
    <div>
      <input
        type={"text"}
        required={true}
        placeholder={"0..."}
        name={"id"}
        onChange={"update"}
      />
    </div>
    <div> &lt; Ranking &lt; </div>
    <div>
      <input
        type={"text"}
        required={true}
        placeholder={"...1000"}
        name={"id"}
        onChange={"update"}
      />
    </div>
  </div>
  <div className={"graphview"}>
    graph view
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.container.inputs {
  width: 50%;
}

.graphview {
  width: calc(50% - 10px);
  border: 5px solid rgba(0, 0, 0, 1);
}

When using percents and borders, you have to calculate the width.

CodePudding user response：

Try to use flexbox

.two-col {
    display: flex;
}

.two-col .col1,
.two-col .col2 {
    background: #f2f2f2;
}

and remove other css