Column with border style css-CodePudding

Hi i need some help in creating a css to follow my prototype image

i want my old to be move to the right and the new to left with middle that a empty space but so far i couldnt get it to be done like this?

prototype image

.column1 {
  flex: 50%;
  height: auto;
  width: 20%;
  border: 1px;
  border-style: solid;
  border-color: black;
}

.column2 {
  flex: 50%;
  height: auto;
  width: 20%;
  border: 1px;
  border-style: solid;
  border-color: black;
}

.row {
  display: flex;
}

.left {
  border: 1px;
  border-style: solid;
  border-color: black;
}

<div >
  <div >
    <h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
    <fieldset id="f1" >
      <label id="symbol">-><input id="name" disabled readonly></label>
      <!-- <ul id="checkbox" > -->
    </fieldset>
  </div>

  <div >
    <h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
    <fieldset id="f2" >
      <label id="symbol">-><input id="name" value="" disabled readonly></label>
      <!-- <ul id="checkbox" > -->
    </fieldset>
  </div>

CodePudding user response：

Add "column-gap" prop to your .row. So you can control gap between columns in easy way.

Also you can minimize your CSS by combining styles, please take a look:

.row {
  display: flex;
  column-gap: 3rem;
}

.column1,
.column2 {
  flex: 1;
  border: 1px solid black;
}

.column1 {
  /* flex: 50%; 
  height: auto;
  width: 20%; 
  border: 1px;
  border-style: solid;
  border-color: black;*/
}

.column2 {
  /* flex: 50%; 
  height: auto;
  width: 20%; 
  border: 1px;
  border-style: solid;
  border-color: black;*/
}


/* .left {
  border: 1px;
  border-style: solid;
  border-color: black;
} */

<div >
  <div >
    <h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
    <fieldset id="f1" >
      <label id="symbol">-><input id="name" disabled readonly></label>
      <!-- <ul id="checkbox" > -->
    </fieldset>
  </div>

  <div >
    <h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
    <fieldset id="f2" >
      <label id="symbol">-><input id="name" value="" disabled readonly></label>
      <!-- <ul id="checkbox" > -->
    </fieldset>
  </div>

CodePudding user response：

You can use this pattern.

.row{
  display: flex;
  justify-content: space-between;
}
.column1 {
  height: auto;
  width: 48%;
/*   border: 1px; */
  border-style: solid;
  border-color: black;
}

.column2 {
  height: auto;
  width: 48%;
/*   border: 1px; */
  border-style: solid;
  border-color: black;
}

.row {
  display: flex;
}

/* .left {
  border: 1px;
  border-style: solid;
  border-color: black;
} */

<div >
  <div >
    <h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
    <fieldset id="f1" >
      <label id="symbol">-><input id="name" disabled readonly></label>
      <!-- <ul id="checkbox" > -->
    </fieldset>
  </div>

  <div >
    <h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
    <fieldset id="f2" >
      <label id="symbol">-><input id="name" value="" disabled readonly></label>
      <!-- <ul id="checkbox" > -->
    </fieldset>
  </div>

CodePudding user response：

You need to remove the flex property from row and then you can use float properties and width properties in both the columns.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css">
</link>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"> 
</script>
<style>
  .column1 {
  flex: 50%;
  height: auto;
  width: 45%;
  float: left;
  border-radius: 10px;
  border: 1px;
  border-style: solid;
  border-color: black;
}

.column2 {
  /* display: flex; */
  flex: 50%;
  height: auto;
  width: 45%;
  float: right;
  border-radius: 10px;
  border: 1px;
  border-style: solid;
  border-color: black;
}

/* .row {
  display: flex;
} */

.left {
  border: 1px;
  border-style: solid;
  border-color: black;
}
    </style>
  </head>
  <body>
    <div >
      <div >
        <h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
        <fieldset id="f1" >
          <label id="symbol">-><input id="name" disabled readonly></label>
          <!-- <ul id="checkbox" > -->
        </fieldset>
      </div>

      <div >
        <h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
        <fieldset id="f2" >
          <label id="symbol">-><input id="name" value="" disabled readonly> 
   </label>
          <!-- <ul id="checkbox" > -->
        </fieldset>
      </div>

  </body>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
    document.getElementsByTagName("input")[0].onkeyup = function(event) {
    if (event.keyCode === 13) {
   alert('Press Escape Key. The textbox will freeze.');
    };

  }
});