I am trying to achieve the following:

[![enter image description here](https://i.stack.imgur.com/Jyg4F.png)](https://i.stack.imgur.com/Jyg4F.png)

A list of text on the left and text input on the right.

This is my attempt, but it is neither working very well or is rather elegant:

```css
.textbox {
  width: 400px;
  border: solid black 2px;
}
ul {
  padding: 5px;
  display: inline-block;
  list-style-type: none;
}
```

```html
<div class="textbox">

  <h4>Info section</h4>

  <ul>
    <li>General</li>
    <li>Board name</li>
    <li>Board image</li>
    <li>Short domains</li>
    <li>Use short domains?</li>
    <li>Get in touch</li>
    <li>Add short domain</li>
    <li>Delete board</li>
  </ul>

  <ul>
    <li>
      <input type="text">
    </li>
    <li>
      <input type="text">
    </li>
    <li>
      <input type="text">
    </li>
    <li>
      <input type="text">
    </li>
    <li>
      <input type="text">
    </li>
    <li>
      <input type="text">
    </li>
    <li>
      <input type="text">
    </li>
  </ul>

</div>
```

Can I do, what I want to achieve in another more elegant way?