How to place two div's side by side. and one at the bottom in table using css?-CodePudding

How to place two div's side by side. and one at the bottom using css?

Is there any way uisng display or the position property?

<table >
  <tr >
    <td>
      <p >1_TIME</p>

      <div >
        <div ></div>
        <div >
          <input  type="radio" name="flexRadioDefault3" id="flexRadioDefault1" checked />
          <label  for="flexRadioDefault1">
                          ON
                        </label>
        </div>
        <div >
          <input  type="radio" name="flexRadioDefault4" id="flexRadioDefault2" />
          <label  for="flexRadioDefault2">
                          YES
                        </label>
        </div>
      </div>
    </td>
    <br/>
    <td >
      <select  id="choice" style="width:150% ; margin-bottom: 20px;">
        <option value="" disabled selected>
          HH:MM/MM±Dusk/MM±Dawn
        </option>
        <option>H1</option>
        <option>H2</option>
        <option>H3</option>
        <option>H4</option>
      </select>
    </td>
  </tr>
</table>

How to place two div's side by side. and one at the bottom using css?

Is there any way uisng display or the position property?

CodePudding user response：

You can use flex box. Looking at your code I don't know which div elements you want to reposition. Here's an example of the layout you were wanting to achieve.

.flex-container {
  display: flex;
  width: 500px;
  
}

.boxA {
  flex: 0 0 50%;
  background: grey;
  border: 1px solid black;
}
.boxB {
  margin-top: 10px;
  height: 50px;
  width: 500px;
  background: grey;
  border: 1px solid black;
}

<div >
  <div >box1</div>
  <div >box2</div>
</div>
<div >box3</div>

CodePudding user response：

This is the flex approach.

  <html>
 <div >
 <div >
 <div>Left</div>
<div>Right</div>
</div>
  <div >Bottom</div>
</div>
</html>

Css is

div{
width:100px;
background-color:red;
border: 2px solid black;
}

.container{
display:flex;
flex-direction:column;
}
.side-by-side{
display:flex;
}

you can also achieve this using grid.