CODEWITHSUNDEEP
htmlcss
Hacker
Hacker

Reputation: 7906

Make radio button and label in same line and when label text is big wrap in multiplelines

I want my radio button and its label to be on same line. I am able to achieve it. But when right side label is big it needs to wrap in a specific format. How do i achieve it. I can achieve using widths, any other option available?

<div class='wrapper'>
<input type='radio'>
<label class='label'>This is a very big text and should wrap as attached in image</label>

enter image description here

Upvotes: 1

Views: 3261

Answers (2)

Temani Afif
Temani Afif

Reputation: 272648

The easiest solution is to add display:flex to wrapper:

.wrapper {
 display:flex;
}
<div class='wrapper'>
<input type='radio'>
<label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>

Also easy if you need some alignment:

.wrapper {
  display: flex;
  margin:20px 0;
  border:1px solid;
}
<div class='wrapper' >
  <input type='radio'>
  <label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>
<div class='wrapper' style="align-items:center;">
  <input type='radio'>
  <label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>
<div class='wrapper' style="align-items:flex-end;">
  <input type='radio'>
  <label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag text and should wrap as attached in image text and should wrap as attached in imag</label>
</div>

Upvotes: 6

kmg
kmg

Reputation: 519

You could align radio button to left and text to right using the CSS property float to achievement the requirement as follows. Working example.

<div class='wrapper'>
<input type='radio'>
<label class='label'>This is a very big text and should wrap as attached in image</label>
</div>

.wrapper {
  border: 1px solid grey;
  width: 15%;
  float: left;
}
.wrapper input {
  float :left;
  display: inline-block;
  width: 5%;
}
.wrapper label {
  float:right;
  display:inline-block;
  width: 91%;
}

Upvotes: 1

Related Questions