Overriding css classes for HTML elements-CodePudding

I am STRUGGILING.

I have to put two elements side by side but they already have css styles on them. I've tried everything to do this and I can't seem to override the css properly.

The code is:

div className="provider-field">
        <label htmlFor="prov">prov</label>
    </div>
    
        <input className="input-field"
          placeholder= "Write name here"
        ></input>
        <div className="provider-field">
          <label htmlFor="Units">Units</label>
        <select
        some code 
        </select>
        </div>

I need to put the input and the select tags next to each other on the page, currently they're on top of one another.

There's already css on both tags, but this is general and I want to specialise it for certain selects and inputs, but they need to inherit other features of the general tag:

.provider-field input {
  width: 100%;
  height: 34px;
  color: #3b444e;
  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
  border: none;
  font-style: normal;
  font-size: 14px;
  line-height: 16px;
}

.provider-field select {
  width: inherit;
  height: 34px;
  color: #3b444e;
  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
    0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
  border: none;
  font-style: normal;
  font-size: 14px;
  line-height: 16px;
}

CodePudding user response：

Use style="display:inline" in div:

<div className="provider-field">
        <label htmlFor="prov">prov</label>
</div>
<input className="input-field" placeholder= "Write name here"/>
<div className="provider-field" style="display:inline">
    <label htmlFor="Units">Units</label>
    <select>
        some code 
    </select>
</div>

CodePudding user response：

You need to change you html structure, because right now you labels and inputs aren't in the same parent tag.

<form>
  <div >
    <label for="input_name">This is a label</label>
    <input name="input_name">
  </div>
  <div >
    <label for="input_name">This is a label</label>
    <input name="input_name">
  </div>
</form>

CSS

.provider-field {
  display: inline-block;
}

This should be enough to make them next to each other