How can i render a div near a text area?

May 14, 2023

I need a certain div to get near a certain textarea, by using either HTML, and CSS. Therefore, here’s my code.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>.HUS LENGUAGE</title>
</head>
<body>
    <div class="initial-bar" style="background-color: #1a1a1a; width: 1330px; height: 90px;">
        <div class="text-title-spacing">
            &nbsp; 
        </div>
            <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</h1>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="go-button">
                <p id="button-title"> &nbsp; &nbsp; &nbsp;RUN !</p>
        </div>
        <link rel="stylesheet" href="hus.css">

       </div>
        <p id="spacer"></p>
<textarea></textarea>
<div class="code-runner">

</div>
</body>
</html>

CSS

body {
    background: #2a2a2a;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: white;
    font-size:  32px;
    line-height: 18px;
    font-style: oblique;    
    display:inline-block;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    display:inline-block;
}
#button-title {
    font-size:  18px;
    line-height: 18px;
}
textarea {
    background-color: #1a1a1a;
    width: 675px;
    height: 675px;
    border: #1a1a1a;
    color: white;
    line-height: 1,5;
    font-size: 25px;
}
.code-runner {
    width: 645px;
    height: 645px;
    background-color: #1a1a1a;
}

I tried to place in my code, a CSS flexbox on auto, but didn’t work, I expected it to center away from it, and it resulted in a textarea, and below it, the div code-runner.

>Solution :

Here is how to display the items side to side:

Use a div container and set that container to flex and flex-row

css:

.text-area-container {
  display: flex;
  flex-direction: row;
}

html:

<div class="text-area-container">
  <textarea></textarea>
  <div class="code-runner">
    Code Runner div
  </div>
</div>

Here is a tool to plaay with css flexbox: https://www.cssportal.com/css-flexbox-generator/

demo answer:

body {
  background: #2a2a2a;
  color: white;
  font-family: sans-serif;
}

.p-title-bar {
  color: white;
  font-size: 32px;
  line-height: 18px;
  font-style: oblique;
  display: inline-block;
}

.go-button {
  background-color: #207000;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  display: inline-block;
}

#button-title {
  font-size: 18px;
  line-height: 18px;
}

textarea {
  background-color: #1a1a1a;
  width: 675px;
  height: 675px;
  border: #1a1a1a;
  color: white;
  line-height: 1, 5;
  font-size: 25px;
}

.code-runner {
  width: 645px;
  height: 645px;
  background-color: #1a1a1a;
}

.text-area-container {
  display: flex;
  flex-direction: row;
}

<div class="initial-bar" style="background-color: #1a1a1a; width: 1330px; height: 90px;">
  <div class="text-title-spacing">
    &nbsp;
  </div>
  <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</h1>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="go-button">
    <p id="button-title"> &nbsp; &nbsp; &nbsp;RUN !</p>
  </div>
  <link rel="stylesheet" href="hus.css">

</div>
<p id="spacer"></p>
<div class="text-area-container">
  <textarea></textarea>
  <div class="code-runner">
    Code Runner div
  </div>
</div>