I try to put two sheets sections right next to one another - but they do not seems to 'listen' to my commands. I want to put Personality section next to Basic one - to not lose space. Here is HTML: <div class="sheet__basic">
<label>
Name:
</label>
<input class="input" type="text" name="attr_character_name" />
<br/>
<label>
Calling and Level:
</label>
<input class="input" type="text" name="attr_calling_level" />
<br/>
<label>
Subrace - Breed, House, etc:
</label>
<input class="input" type="text" name="attr_subrace" />
<br/>
<label>
Family:
</label>
<input class="input" type="text" name="attr_family" />
<br/>
<label>
Background:
</label>
<input class="input" type="text" name="attr_background" />
</div>
<div class="sheet__personality">
<h2>Personality Traits</h2>
<label>
<bold>Ideal</bold>
- What is most important to me ...
</label>
<br/>
<textarea></textarea>
<br/>
<select id="personality">
<option value="bond"><label>
<bold>Bond</bold>
- I am inspired by my bond to ...
</label></option>
<option value="mystery"><label>
<bold>Mystery</bold>
- No one knows about...
</label></option>
</select>
<br/>
<textarea></textarea>
<br/>
<label>
<bold>Flaw</bold>
- No matter what, I just can't ...
</label>
<br/>
<textarea></textarea>
<br/>
</div> And here is relevant CSS: .sheet__basic {
grid-area: basic;
border: 2px solid blue;
float: left;
}
.sheet__personality {
width: 60%;
grid-area: personality;
border: 2px solid blue;
float: right;
}
textarea.sheet__personality {
width: 60%;
}
