Place div elements side by side-CodePudding

Is there a way to place div elements side by side


<div style = "display: inline-block;" class="sev_border">
  <h4>Se</h4>
  <div class="row">
    <h4></h4>
    <div class="col-sm-12">
      <div class="form-group shiny-input-container" style="width:600px;">
        <label class="control-label" id="Is" for="Is">Is</label>
        <div>
          <select id="Is"><option value="" selected></option>
<option value="Not Applicable">Nble</option>
<option value="No Impact">Nct</option>
<option value="Low Impact">Loct</option>
<option value="Medium Impact">Medact</option>
<option value="High Impact">Higct</option></select>
          <script type="application/json" data-for="Is">{"plugins":["selectize-plugin-a11y"]}</script>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <h4></h4>
    <div class="col-sm-12">
      <div class="form-group shiny-input-container" style="width: 600px;">
        <label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label>
        <textarea id="SEVE3" class="form-control" style="width:width: 100%;;height:200px;"></textarea>
      </div>
    </div>
  </div>
</div>

Here both selectinput and textinput is placed one below each other, But can this be place side by side

CodePudding user response：

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


</head>

<body>
    
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6">

                    <select id="Is">
                        <option value="" selected></option>
                        <option value="Not Applicable">Nble</option>
                        <option value="No Impact">Nct</option>
                        <option value="Low Impact">Loct</option>
                        <option value="Medium Impact">Medact</option>
                        <option value="High Impact">Higct</option>
                    </select>

                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">
                    <label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label>
                    <textarea id="SEVE3" class="form-control" style="width: 100%;;height:200px;"></textarea>
                </div>
            </div>
        </div>
    </section>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous">
    </script>


</body>

</html>

Use bootstrap links and add code in this format

<div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">

                <select id="Is">
                    <option value="" selected></option>
                    <option value="Not Applicable">Nble</option>
                    <option value="No Impact">Nct</option>
                    <option value="Low Impact">Loct</option>
                    <option value="Medium Impact">Medact</option>
                    <option value="High Impact">Higct</option>
                </select>

            </div>

            <div class="col-lg-6 col-md-6 col-sm-6">
                <label class="control-label" id="SEVE-label" for="SEV 3">SEVER</label>
                <textarea id="SEVE3" class="form-control" style="width: 100%;;height:200px;"></textarea>
            </div>
        </div>
    </div>

CodePudding user response：

Try using col-sm-6 instead of col-sm-12 because it can divide 2 columns side by side so and use of in single row and inside use twice col-sm-6.